Re: [csswg-drafts] [css-scoping] Proposal for light-dom scoping/namespacing with re-designed `@scope` rule (#5809)

> Ideally we would have the flexibility to decide whether we want to (for each usage):
> 
> - just use the global class styles
> - just use the scoped class styles
> - use both (the global and scoped class styles)

I think those are interesting use-cases, but I don't see any clear way for `@scope` to handle those distinctions better than selectors already do. The final decision here always has to be made on the HTML side, and that's what selectors are for. 

In this proposal, you could set it up selectors exactly the same way as before. But it would also let you clarify the decision once, at the component level:

```css
/* it's not really "global" if it has exclusions… we can clarify those */
@scope ( html ) to ( .exclusive ) {
  .title { color: blue; }
}

/* make the article scope more explicit/optional with a class */
@scope (article.scoped) {
  .title { font-size: 2em; }
  .meta { font-style: italic; }
}
```

Now we can make that decision to use `.scoped` or `.exclusive` in the html:

```html
<!-- global only -->
<article>
  <span class="title">Hello, World!</span>
  <span class="meta">foo</span>
</article>

<!-- scoped only -->
<article class="scoped exclusive">
  <span class="title">Hello, World!</span>
  <span class="meta">foo</span>
</article>

<!-- both together -->
<article class="scoped">
  <span class="title">Hello, World!</span>
  <span class="meta">foo</span>
</article>
```


-- 
GitHub Notification of comment by mirisuzanne
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5809#issuecomment-839942019 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 12 May 2021 16:59:46 UTC