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

Regarding [the namespace problem](https://css.oddbird.net/scope/explainer/#the-namespace-problem), consider this example:

```css
.title {
  color: blue;
}

@scope (article) {
  .title { font-size: 2em; }
  .meta { font-style: italic; }
}
```

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

(Example based on https://css.oddbird.net/scope/explainer/#avoid-naming-conflicts-without-custom-conventions.)

I presume the styles for both `title` classes would be applied (the global class and the scoped class)? What if (for whatever reason) I only want to use the global styles and not the scoped styles? With existing tooling we would be able to do something like this:

```css
.title {
  color: blue;
}

.article {
  &__title { font-size: 2em; }
  &__meta { font-style: italic; }
}
```

```html
<article class="article">
  <!-- Here I'm deliberately *not* using the scoped styles -->
  <span class="title">Hello, World!</span>
  <span class="article__meta">foo</span>
</article>
```

Ideally we would have the flexibility to decide whether we want to:

- just use the global class styles
- just use the scoped class styles
- use both (the global and scoped class styles)

-- 
GitHub Notification of comment by OliverJAsh
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5809#issuecomment-839711575 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 11:56:35 UTC