Remove copyStyleSheets option

site/en/docs/web-platform/document-picture-in-picture/index.md

@@ -6,7 +6,7 @@ description: >
 authors:
   - beaufortfrancois
 date: 2023-02-02
-updated: 2023-06-01
+updated: 2023-06-09
 hero: image/vvhSqZboQoZZN9wBvoXq72wzGAf1/l8xW8V85N60e4dmwUwmE.jpg
 alt: Person holding outdoor lounge chairs.
 tags:
@@ -86,10 +86,6 @@ Research has shown that users need more ways to be productive on the web. Docume
   `height`
   : Sets the initial height of the Picture-in-Picture window.
 
-  `copyStyleSheets`
-  : When `true`, the CSS style sheets of the originated window are copied and applied to the Picture-in-Picture window. This is a one-time copy.
-    The default value is `false`.
-
 ### Events
 
 `documentPictureInPicture.onenter`
@@ -146,23 +142,45 @@ pipButton.addEventListener("click", async () => {
 
 ### Copy style sheets to the Picture-in-Picture window
 
-To copy the CSS style sheets from the originating window set the `copyStyleSheets` option of `documentPictureInPicture.requestWindow()` to `true`. Note that this is a one-time copy.
+To copy all CSS style sheets from the originating window, loop through [`styleSheets`](https://developer.mozilla.org/docs/Web/API/Document/styleSheets) explicitly linked into or embedded in the document and append them to the Picture-in-Picture window. Note that this is a one-time copy.
 
 ```js
 pipButton.addEventListener("click", async () => {
   const player = document.querySelector("#player");
 
-  // Open a Picture-in-Picture window with style sheets copied over
-  // from the initial document so that the player looks the same.
-  const pipWindow = await documentPictureInPicture.requestWindow({
-    copyStyleSheets: true,
-  });
+  // Open a Picture-in-Picture window.
+  const pipWindow = await documentPictureInPicture.requestWindow();
+
+  // Copy style sheets over from the initial document
+  // so that the player looks the same.
+  const allCSS = [...document.styleSheets]
+    .map((styleSheet) => {
+      try {
+        return [...styleSheet.cssRules].map((r) => r.cssText).join("");
+      } catch (e) {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.type = styleSheet.type;
+        link.media = styleSheet.media;
+        link.href = styleSheet.href;
+        pipWindow.document.head.appendChild(link);
+      }
+    })
+    .filter(Boolean)
+    .join("\n");
+  const style = document.createElement("style");
+  style.textContent = allCSS;
+  pipWindow.document.head.appendChild(style);
 
   // Move the player to the Picture-in-Picture window.
   pipWindow.document.body.append(player);
 });
 ```
 
+{% Aside %}
+The `copyStyleSheets` option was supported in a previous version of the specification. It is [not the case anymore](https://github.com/WICG/document-picture-in-picture/pull/79).
+{% endAside %}
+
 ### Handle when the Picture-in-Picture window closes
 
 Listen to the window `"unload"` event to know when the Picture-in-Picture window gets closed (either because the website initiated it or the user manually closed it). The event handler is a good place to get the elements back out of the Picture-in-Picture window as shown below.