POC - website playground isolation with CSS cascade layers #2764
Conversation
There was a problem hiding this comment.
Thanks so much @slorber for your work. This is a dream coming reality!
Everything seems to run as expected - I will investigate more the change to make sure. (Too bad we need to rely on that "impossible selector" workaround, but I think this is CSS just being CSS :)
| html[data-theme="dark"] .rdp-root { | ||
| --rdp-accent-color: var(--ifm-color-primary); | ||
| --rdp-accent-background-color: #073845; | ||
| --rdp-range_end-color: black; | ||
| --rdp-range_start-color: black; | ||
| } |
There was a problem hiding this comment.
I assume this should be put out of the .rdp-demo selector to work (probably it was added to support the shadow DOM).
There was a problem hiding this comment.
Thanks for your feedback, and glad to hear it seems to be working well!
Honestly I'm not sure exactly how your existing lib CSS rules work so I just tried to refactor things to make it look quite the same as it used to be, otherwise you can organize things differently if you think it's appropriate
Docusaurus maintainer here, trying to see if we can get a simpler built-in solution to avoid global CSS pollution (facebook/docusaurus#6032).
I'd like to ensure that the solution I plan to implement and suggest works well for your library, can you please confirm if you see any unwanted side effects?
Note, since you also provide your own global CSS pollution through
custom.css, I also had to wrap your global styles in a layer and revert it so that the playground is not affected. However, this wrapping can have side effects (for example the search input overrides). Those should be easy to fix, so I'd prefer if we focus our discussions on how the playground renders.From my point of view, it seems to render well and similarly to the shadow dom version, however I didn't check all pages