[skrebbel]

We ran into this too, and ended up not using the Shadow DOM at all. We want our stuff to automatically use the page's fonts, sizes, colors etc. Also we want customers to be able to customize stuff with CSS without having to use JS hacks to inject CSS into the shadow DOM (this gets especially cumbersome when you're nesting web components). Personally I feel like the shadow DOM is the most oversold part of web components, in that it's so all-or-nothing that it often creates more problems than it solves.

[mock-possum]

Which is another thing I love about web components - if you don’t want shadow dom, then don’t use it - you can build using just custom elements.

[skrebbel]

True, but i wish there was a way to say "don't inherit anything here except fonts and colors".

Being able to make a new root for rems would be nice too.

[hmcdona1]

The Shadow DOM does exactly what you are asking for here. Just use CSS variables, they pierce right through:

https://open-wc.org/guides/knowledge/styling/styles-piercing...

[skrebbel]

yeah so this means that if i want to use a page's font family but not its font size, the user has to do extra effort, and set not just `font-family: "Comic Sans"`, but also `--some-component-font-family: "Comic Sans"`. i'd love it if i could just selectively inherit stuff and not other stuff, without the user having to learn which css variables my thing supports. of course you can't do this with domain specific stuff, but you could make a thing fit kinda sorta well into its environment by default, and right now using a shadow DOM doesn't let you do that.