fix(multiple): set nonce using setAttribute (#28800)

Uses `setAttribute` to set the nonce, instead of DOM property in order to work properly in SSR.

Fixes #28780.

Author: crisbeto

src/cdk-experimental/column-resize/resize-strategy.ts

@@ -238,7 +238,7 @@ export class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDest
       this._styleElement = this._document.createElement('style');
 
       if (this._nonce) {
-        this._styleElement.nonce = this._nonce;
+        this._styleElement.setAttribute('nonce', this._nonce);
       }
 
       this._styleElement.appendChild(this._document.createTextNode(''));

src/cdk-experimental/table-scroll-container/table-scroll-container.ts

@@ -118,7 +118,7 @@ export class CdkTableScrollContainer implements StickyPositioningListener, OnDes
       this._styleElement = this._document.createElement('style');
 
       if (this._nonce) {
-        this._styleElement.nonce = this._nonce;
+        this._styleElement.setAttribute('nonce', this._nonce);
       }
 
       this._styleRoot.appendChild(this._styleElement);

src/cdk/layout/media-matcher.ts

@@ -65,7 +65,7 @@ function createEmptyStyleRule(query: string, nonce: string | undefined | null) {
       mediaQueryStyleNode = document.createElement('style');
 
       if (nonce) {
-        mediaQueryStyleNode.nonce = nonce;
+        mediaQueryStyleNode.setAttribute('nonce', nonce);
       }
 
       mediaQueryStyleNode.setAttribute('type', 'text/css');

src/youtube-player/youtube-player.ts

@@ -719,7 +719,7 @@ function loadApi(nonce: string | null): void {
   script.async = true;
 
   if (nonce) {
-    script.nonce = nonce;
+    script.setAttribute('nonce', nonce);
   }
 
   // Set this immediately to true so we don't start loading another script