"open-stylable" Shadow Roots
We keep hearing that the strong style encapsulation is a major hinderance - perhaps the primary obstacle - to using shadow DOM. The problems faced are usually a variant of trying to use a web component in a legacy context where global styles of the page are expected to be applied deeply through out the DOM tree, or a modern context with tools that don't work with scoping, eg Tailwind. I've see requests to workaround encapsulation formed in a number of ways: 1. Turn off shadow DOM (as is an option in LitElement), but keep `<slot>` working (which obviously isn't). 2. Allow styles to apply from the outside 3. Add a way to automatically inject page styles into shadow roots. 4. Implement a custom CSS scoping mechanism for when shadow dom is off 5. Some specific library, eg Tailwind, converted to work with shadow roots 6. etc... Would it be possible to address some of these difficulties with scoping more or less directly, by adding a new shadow root mode that allows selectors to reach into a shadow root from above? Something like: ``` this.attachShadow({mode: 'open-stylable'}); ``` Application developers could then make sure that elements from the root of the page on down to where they need styles to apply use open-stylable shadow roots. Library authors could offer control over the mode for legacy situations, etc. I'm not sure how combinators would work here. ie, would `.a > .b {}` apply to `<div class="a"><x-foo>#shadow<div class="b">`? It may be that's not even needed to b
Posted by justinfagnani on Dec 10, 2020, 10:48 PM
Tags
Related issues
- The issue is really the extreme difficulty of programming them, especially for anything sequential (rather than combinatorial).
- I probably could have beared with it if it was only limited to programming, but it showing up in creative fields has made me feel all sor...
- I hate that I'm in deep enough to know what you mean.
- The biggest problem with “AI” is that big corps are shoving it down our throats.
- in the middel of a coding session with 5.6 sol.
- [Hero Run] 535B-A23B on 18T tokens
Raise real-world problems, find people facing the same issue, and discuss solutions.3,000 issues0 comments
reliability (Other)
The issue is really the extreme difficulty of programming them, especially for anything sequential (rather than combinatorial).
I probably could have beared with it if it was only limited to programming, but it showing up in creative fields has made me feel all sor...
I hate that I'm in deep enough to know what you mean.
The biggest problem with “AI” is that big corps are shoving it down our throats.
in the middel of a coding session with 5.6 sol.
[Hero Run] 535B-A23B on 18T tokens
I hate that this is how AI is being used..
inexperienced protobuf user here -- why do non-googlers generally use protobuf?
"open-stylable" Shadow Roots
We keep hearing that the strong style encapsulation is a major hinderance - perhaps the primary obstacle - to using shadow DOM. The problems faced are usually a variant of trying to use a web component in a legacy context where global styles of the page are expected to be applied deeply through out the DOM tree, or a modern context with tools that don't work with scoping, eg Tailwind. I've see requests to workaround encapsulation formed in a number of ways: 1. Turn off shadow DOM (as is an option in LitElement), but keep `<slot>` working (which obviously isn't). 2. Allow styles to apply from the outside 3. Add a way to automatically inject page styles into shadow roots. 4. Implement a custom CSS scoping mechanism for when shadow dom is off 5. Some specific library, eg Tailwind, converted to work with shadow roots 6. etc... Would it be possible to address some of these difficulties with scoping more or less directly, by adding a new shadow root mode that allows selectors to reach into a shadow root from above? Something like: ``` this.attachShadow({mode: 'open-stylable'}); ``` Application developers could then make sure that elements from the root of the page on down to where they need styles to apply use open-stylable shadow roots. Library authors could offer control over the mode for legacy situations, etc. I'm not sure how combinators would work here. ie, would `.a > .b {}` apply to `<div class="a"><x-foo>#shadow<div class="b">`? It may be that's not even needed to b
Comments (0)
No comments yet. Start the discussion.