Best practices for styling web components

This is a Github issue posted by @straker and moved here by me because it seems more relevant since this forum covers specifications. I’ve never seen the Contructable Stylesheet Proposal. How might one use that as opposed to using CSS Custom Properties (variables) & the CSS Apply Directive in Web Components?

Here is the original issue - https://github.com/w3c/webcomponents/issues/510

"What I’m hoping to gain from this question is an idea of what those who are in the trenches believe is/are the best practices for styling web components (taking into account future specs).

There seems to be two competing philosophies in terms of styling web components. On one hand, we have the philosophy that all web components should encapsulate all their styles and you should not allow style sheets to penetrate them (aka. a style guide). On the other had, there’s the philosophy that shared / common styles should penetrate web components so a style guide on a site can style them.

At the moment, penetrating web components with a style sheet is difficult and not performant, but the constructable stylesheet proposal would fix those issues. However, encapsulated styles for web components could also be problematic as the more styles you put in a web component, the slower it is to parse every time it’s used.

So taking into account the probable future, which philosophy do you believe is or will become the best practice?"

TL;DR: I don’t think we quite know yet. The best way to know is through experience. There are a lot of tradeoffs here, I think we are getting closer to knowing what we are doing, but still not quite.

Earlier Chrome experiments as you know went through all sorts of variations. First, maybe no shadow dom, then shadow dom period, then shadow dom with a piercing combinator, and a deep piercing combinator - likewise we’re also working on things like “all” which aren’t even shadow dom, but may play a useful role. Personally I think that right now, if you have access to shadow dom (we widely still don’t and at least some folks like myself don’t even want to pretend with a polyfill/prollyfill for numerous reasons) you’re better off sealing it up and providing other inroads… CSS Custom Properties should be a good one, but there too we just aren’t widely implemented yet. Another one I have fooled around with is an attribute that allows you ‘copy down’ a style block or something, from the inside - but that requires your component to support such an option.

As to the performance of parsing, we can be intelligent about that, but the time spent applying styles operating on a much smaller tree with far fewer rules (making the whole problem more local) probably makes it more or less moot I’m betting.