demo · v131

Document PiP - copy document mode

copyStyleSheets: true tells the Document PiP window to inherit every regular stylesheet from this page. Toggle the option and compare it with a constructed CSSStyleSheet attached through adoptedStyleSheets.

this card will be cloned into the PiP window

A toy player view. With copyStyleSheets on, the PiP window will look like this. Off, you get unstyled content.

now playing 04:12 / 18:33 constructed CSSStyleSheet marker

adoptedStyleSheets probe

The blue pills are styled by this page's regular <style> block. The constructed marker is styled only by a runtime-created CSSStyleSheet assigned to document.adoptedStyleSheets.

Host probe pending.

Open a PiP window to compare copied regular styles with copied constructed styles.

Late stylesheet probe has not run yet.

the api

const win = await documentPictureInPicture.requestWindow({
  width: 420,
  height: 240,
  copyStyleSheets: true,   // NEW in 131
});
win.document.body.append(node.cloneNode(true));

see also