Egor KloosJul 3, 2023
I finally posted my use case for scope in #CSS. It would be the best thing to happen to Design Systems using #webcomponents. (@mia, I hope this helps in some small measure.)
https://github.com/mozilla/standards-positions/issues/472#issuecomment-1617707207
CSS @scope · Issue #472 · mozilla/standards-positions

Request for Mozilla Position on an Emerging Web Specification Specification Title: CSS @scope Specification or proposal URL: https://drafts.csswg.org/css-cascade-6/#scope-atrule (explainer) Caniuse...

GitHub
Show threadwestbrookJul 3, 2023

@dutchcelt @mia Is your light DOM actually complex enough that scope would give you new capabilities for styling that content than we have know? Also, how would your component distribute and apply these styles to light DOM?

Wouldn’t you benefit more from complex selectors in :host and ::slotted, as well as a modifier/alternative to slotted with more naturally high specificity as to override external styles. Seems that if we could scope without the shadow we could do those things?

Show threadEgor KloosJul 3, 2023
@westbrook @mia Indeed, the other (better) option, from my #webcomponent perspective, would be to allow more potent selectors to deal with slotted content. If I had that, I wouldn't need to resort to a dual-stylesheet approach because that's really icky.
Show threadAki Rodic
@dutchcelt @westbrook @mia that's one of the reasons I decided not to use shadow root in my framework. It makes everything transparent for css selectors.
Jul 3, 2023 at 2:03pmWeb
Show threadEgor KloosJul 3, 2023
@aki @westbrook @mia It's a trade-off. For some projects, not all, I work on, the limited styling on Light DOM elements is worth the trade-off when the Design System gains interoperability across disparate product solutions.
Show threadwestbrookJul 3, 2023
@dutchcelt @aki Definitely err on the side of control. Styles in she shadow root are an API whose contract is made by the element being able to transport its own styles natively. Starting there means you can leave there if/when you need, but starting open makes it really hard to go the other way. In fact, I’d say that was the main stress people have when moving to shadow DOM based projects, knowing what it really means to have “privacy” in styles.