Attaches scope CSS to wrong root in Iframe and Pop-up

[Captainpast]

Vue version

3.5.16

Link to minimal reproduction

https://play.vuejs.org/#eNp9U01v2zAM/SuCTgmQ2tu67ZC5QffRw4ZhG7YCuwgYUpvO1NqSoA8nXeD/vicJTlu0jQ+GSD6Sj9TTnr83phgC8SWvXG2l8cyRD2YllOyNtp7tWW1p7QlANrLW6p4JjgzBD5CPujdTpCijFUtGgFBtULWXWjFtSP2WqtHb2ZzthWKs1sp5tpWKnaXoDBl8gRr5b7QJRvB5gk4UZrH6vOh1UH6G1KLRdehJ+eJKN7fAjg+atnbd01e9bmY0ADQ1frJaQhR+bTfkC3DzMD89rl6VeU/YEAxPvelQDBZj1VXwHl3P607WN2eC380s+CoacVpYVZmROSuSKPNRJsLsvANl5B/oI70qcxDAqrzXli+4d6Dbyk1x7bTCTaYhBa9RV3Zkv5u4Cyf4Mo8fY+uu09svyedtoMXkr/9SffOE/9rtok/wH5Yc2QG3e4jlleXwxa9vtMP5EOx1EzqgjwR/ktNdiBwz7ENQDWjfwyW2n5PYpNpcuosdLsdNQ0WiETkmfBJnXOlzo9/RPS1epzzcK7Y46fbYU7DUPnoEQmUh924DIQMBHV+SQwcI5phaGjmkQ/wqqUzwbDjBSqjD1aOa4CzLIgHMar9PPcaxKiMp+Mpc4oEeYDp/2xGDKAw1kX0qneZvIesTJ//Rkr16YXbvkqLN9Bw7bZcYoMluUI91ssT+DGTjwrGc0+JN8fItH/8DV3lwgw==

Steps to reproduce

When mounting a Vue-App to an external document like an iframe or a popup window, all the functionality from JavaScript is working, but the Style of a Single-File Components is attached to the calling document instead of the document of the mounted element.

const win = open("", "", "popup")
createApp(Comp).mount(win.document.body)

What is expected?

The CSS should be attached to the rootContainer's document of mount().

What is actually happening?

The CSS is attached to the document of the JavaScript scope

System Info

Any additional comments?

Using node.ownerDocument instead of window.document

[edison1105]

The core issue you're describing is that you want the related styles to be inserted into the corresponding iframe's (or popup's) head when mounting components to an iframe. However, Vue itself isn't directly responsible for style insertion. In reality, style insertion is primarily handled by build tools (like Vite, Webpack, etc.) during the build phase, and ultimately gets inserted into the main document's head.