fix(cdk/clipboard): not working inside fullscreen element (angular#27456

)

Fixes that the clipboard service didn't work when the page is fullscreen.

Fixes angular#27447.

src/cdk/clipboard/pending-copy.ts

@@ -36,7 +36,9 @@ export class PendingCopy {
     textarea.value = text;
     // Making the textarea `readonly` prevents the screen from jumping on iOS Safari (see #25169).
     textarea.readOnly = true;
-    this._document.body.appendChild(textarea);
+    // The element needs to be inserted into the fullscreen container, if the page
+    // is in fullscreen mode, otherwise the browser won't execute the copy command.
+    (this._document.fullscreenElement || this._document.body).appendChild(textarea);
   }
 
   /** Finishes copying the text. */

src/dev-app/clipboard/clipboard-demo.html

@@ -12,3 +12,8 @@
 <button
   [cdkCopyToClipboard]="value"
   [cdkCopyToClipboardAttempts]="attempts">Copy to clipboard via directive</button>
+
+<section>
+  <label for="testing-area">Testing area</label>
+  <textarea id="testing-area" cols="30" rows="5"></textarea>
+</section>