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
namukang
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? |
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