Re: [w3c/webcomponents] Theming options for shadow roots (#864)

### Use case: styling deeply nested components###
I've been working on a tree webcomponent that is by nature nesting lots of components.
Source:
https://github.com/floreysoft/floreysoft-components/blob/master/packages/floreysoft-tree/Tree.ts
Demo (tree at bottom):
https://floreysoft-components.web.app

To slot the chlidren of a node the tree component has to use shadow DOM.
The user may want render different tree nodes differently, e.g. by adding a .class or #id to some of the nested nodes.
As custom properties propagate to all children, they are not working well in this usecase.
Right now I'm using the style-attribute on the different nodes, but this is of course ugly and very limited.
It would be really nice to be able to apply a stylesheet to the root of the tree with various css selectors to e.g. style all direct children of a certain node.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/864#issuecomment-592527862