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?"