Re: [WICG/webcomponents] "open-stylable" Shadow Roots (#909)

I completely agree that `@layer` is the wrong tool for selecting which styles make into shadow DOM. It just seemed convenient because it is an already-available way of grouping styles. I've been guilty of [suggesting layers myself](https://www.mayank.co/blog/presentational-shadow-dom).

Also there is a big problem with the shadowlayers proposal (and some existing demonstrations like half-light): all document styles are wrapped in a layer. This may be fine for specific cases, but it's not a good default. In fact the default should be flipped, because that's how the cascade already works today: page styles cascade after the shadow-root's own styles. Perhaps more importantly, it should be possible to place different layers from the document into different spots (not possible if everything is wrapped in a single `inherit` layer).

A few comments up, I showed an example like this:
```css
@layer inherit.A, A, B, inherit.B;
```
This would not work. Layers cannot be split like this. The browser will "autocorrect" it to:
```css
@layer inherit.A, inherit.B, A, B;
```

I've been a huge fan of layers since day one, and I still think they'll help us manage the cascade priorities of "outside" vs "inside" styles. But this should be opt-in. 

The solution to open-styleable should allow some way of using these already-written styles.
1. The vast majority of CSS written today (both outside and inside shadow-roots) doesn't use layers. These styles might already manage the specificity in a way that open-styleable will work fine out-of-the-box. For example, all styles in their reset might be deprioritized using `:where` and their utilities might be reinforced with `!important`.
2. Similarly, a lot of CSS written today is already properly scoped (e.g. using build tools or namespacing). Open-styleable will work fine with these styles out-of-the-box.
   - In fact, there's good precedent for this: framework components (built with light DOM) distributed to npm are widely used (way more than shadow DOM is used). And it has been totally fine.
   - The key difference here is that the expectations for light DOM components were clear from the get-go, so they likely do not use vague classes like "button". Existing shadow DOM components never had this same expectation. That's why open-styleable shadow-roots should be opt-in, using a new attribute/property.

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

Message ID: <WICG/webcomponents/issues/909/2012215949@github.com>