CarlosNZ
Styles are incorrectly added when component is started inside the Shadow DOM
Describe the bug
When the component is rendered within the Shadow DOM instead of in the main page, the CSS styles are still attached to the document head rather than within the shadow root. This means that any styling defined in ./src/style.css is not applied.
Furthermore, since style.css is inlined into the build output, and not included in the distributed package, I can't explicitly include the styles myself inside the shadow root. (Doing so would 2x include the styles, but bundle size isn't a big concern for my use case).
Expected behavior The stylesheet is added to the shadow root rather than the page head element, though this strikes me as a breaking change.
Maybe a separate build that doesn't include the styles, and instead requires importing the stylesheet manually?
Screenshots
Online demo https://codesandbox.io/p/sandbox/json-edit-react-demo-forked-pvph9n
Interesting, thanks for bringing this to my attention. After a bit of digging around (thanks Claude), it looks like I should be able to create a dual build, one with styles auto-injected and one without, as you suggest.
I'll try and get that sorted over the next week or so.
Actually, I'll probably do something even simpler -- I'll just copy the styles.css file into the build folder to make it available to import for users such as yourself.
Thanks! I just worked around my needs for now by copying all the styles into my own stylesheet. Somewhat unintuitively, the :root selector used in the style.css also doesn't work in the shadow DOM. if we can make that target :root, :host { then that works.
Hi @adharris -- sorry I've taken so long to get back to this.
I've just published a beta with the original style.css file included in the package, so you can import it separately.
https://www.npmjs.com/package/json-edit-react/v/1.29.1-beta1?activeTab=code
Can you see if this helps you at all?