search

WICG / document-picture-in-picture

https://wicg.github.io/document-picture-in-picture/
Other
56 stars 9 forks source link

Newly rendered component's styles are added to <head> of original window, and not in PIP window's <head> #110

Open im185087 opened 7 months ago

im185087 commented 7 months ago

Hi there,

My team and I are experiencing an issue where, when we have a PIP window open and a React component is rendered within the PIP window, the styles that are generated from its makeStyles (MUI v5) are not being added to the <head> element in the PIP's DOM but instead are being added to the <head> original window's DOM.

To provide some context:

we have a chat, and when you click on a button, you can open it in a PIP window. We're following the examples provided on the Google developer page to create the PIP window and copy the stylesheets over. We are also using createPortal from React, to render our chat inside the PIP window.

The chat renders with our styling as expected. But, if our chat moves to the PIP window with no message components rendered initially (basically no messages have been sent in the chat), and a message is then sent/received, the styling for them is not applied.

We did some investigation and noticed that when a message component is rendered in the PIP window, the styles (that are generated from MUI makeStyles) are applied in the <head> of the original DOM as opposed to the <head> of the PIP window DOM (where that message component lives).

Does anyone have any insight as to what may be happening here? Any help is appreciated.

drmercer commented 6 months ago

In my experience, lots of things break when running scripts in one window to control the DOM in another. (For example element instanceof HTMLElement breaks when element is from a different window.) I imagine a lot of frameworks aren't built or tested with that use case in mind...

This means the current design of Doc PIP is not my favorite, because the Doc PIP window doesn't load its own document like a normal window. In my use of Doc PIP, I worked around this by loading an <iframe> in the Doc PIP window, so that I can have a normal self-contained window that doesn't violate the assumptions of web frameworks. :sweat_smile: The downside is now I have to use postMessage to communicate between the windows, but I haven't needed to do that much in my case.

beaufortfrancois commented 6 months ago

In my experience, lots of things break when running scripts in one window to control the DOM in another. (For example element instanceof HTMLElement breaks when element is from a different window.) I imagine a lot of frameworks aren't built or tested with that use case in mind...

In https://document-picture-in-picture-api.glitch.me/, when the PiP window is opened, the following code works as expected:

documentPictureInPicture.window.document.querySelector('video') instanceof HTMLElement

@drmercer Can you share reproducible steps?