fix(isolated-element)!: Use a div instead of html

[aklinker1]

Caution

BREAKING CHANGE

A full HTML document is no longer created inside your Shadow DOM. Instead, a simple div is used.

Originally, a full HTML doc was used so CSS frameworks treated your shadow DOM the same as your root page. However, newer version of CSS frameworks support shadow DOMs. If they don't... it will be very obvious because all your styles will be missing. I recommend opening a PR for your framework to add support.

To fix, you just need to add the :host selector to wherever the base styles are set (usually :root or html) to ensure they're also applied to the shadow root host as well:

-:root {
+:root, :host {
   ...
 }

---

Overview

Recreation of #118.

Next steps:

• Merge and release breaking change
• Create PR in WXT for upgrading to the released version, include changes from fix: use uiContainer to apply position when creating shadow root ui wxt-dev/wxt#2036 in it (I reverted them, see fix: use uiContainer to apply position when creating shadow root ui wxt-dev/wxt#2036 (comment))