fix: shadow dom should not be a full HTML document#118
Conversation
Add test to ensure the shadow DOM does not contain a full HTML document structure (<html>, <head>, <body> elements) and instead uses a simple <div> element as the isolated container.
Replace html/head/body structure with simpler div element to avoid invalid DOM nesting
namuorg
changed the title
|
This is done purposefully to support CSS libraries like tailwindcss that expect an HTML structure add styles inside Since most modern CSS frameworks require this, it's not something I plan on changing. If this behavior doesn't work for you, you can implement your own isolated element helper. I'd be more than willing to point you in the correct direction! I would be more open to a flag that toggles between the two modes, full HTML vs fragment, than not supporting the full HTML mode. Feel free to update and reopen this PR with that implemented or create a new PR. |
|
@aklinker1 Thanks for the explanation! Tailwind actually fixed that issue so that As a result, the CSS variables are defined correctly inside the shadow DOM. In other words, Tailwind will continue to work if WXT switched to constructing the shadow DOM without building a full HTML document. Does that affect your thoughts about changing the implementation to using a fragment instead of creating an HTML document? |
I'm down if CSS frameworks are going to start supporting it... Still a little hesitant since most CSS frameworks don't seem to care about shadow DOMs, that could make people's migration to the latest version much harder. Let's make it a breaking change here and a breaking change in WXT so it gets out in the next major release. If we get feedback the full DOM is needed by some frameworks, we can make the decision then if we want to add a feature flag or a PR on the framework. |
|
Making it a breaking change sounds good to me. Thanks for taking a look! Is there anything you'd like me to do on my end to help with that? |
|
For some reason I can't re-open this PR, I think because you deleted your fork. I'll open a new one with your changes and add you as a co-author. So nope, you're good, unless you want to make that PR lol |
|
Ah, you're right — I went too hard when cleaning up my GitHub repos 🫠 I'm good with you opening the new one. Thanks! |
2 participants
@webext-core/isolated-elementcurrently creates a full HTML document when setting up the shadow DOM. This is incorrect, as the shadow DOM is a fragment of the DOM tree, not a full HTML document.Example on MDN of setting up a shadow DOM: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM#creating_a_shadow_dom
Fixes #105
Companion PR for
wxt: wxt-dev/wxt#1939