Re: [csswg-drafts] [css-selectors][css-namespaces] Lexical Scoping (#4061)

I feel like this is extremely clunky:
```html
<link rel="stylesheet" href="all.css" namespace="#buttons:buttons #links:links #call-to-action:marketing">
<aside marketing:class="cta">
   <a href="signup.html" buttons:class="button" links:class="link"> Sign Up! </a> <!-- matches the selector defined in call-to-action.css -->
</aside>
```
I mean, not only does the namespace prop get hairy, but the xml-style namespacing is extremely limited, and this form doesn't allow multiple inheritance. It also clashes with xml namespacing, does it not? Regardless, I think something like [Rich Harris's suggestion](https://twitter.com/Rich_Harris/status/1161280941500837888) is much more palatable. 

e.g.
```html
<style>
@scope foo {
  p {
    font-family: 'Comic Sans MS';
  }
}
</style>
<div css="foo">
  <p>Paragraph with scoped styles</p>
</div>
```
The reason why this is hugely powerful is because you could extend it in a media-query-like fashion, which namespacing doesn't provide any flexibility for. I might also change the HTML attribute. As in:
```html
<style>
@scope foo {
  p {
    font-family: 'Comic Sans MS';
  }
}
@scope bar {
  p {
    color: red;
  }
}
</style>
<div scope="only (foo, bar)">
  <p>Paragraph with foo and bar styles only</p>
</div>
<div scope="all and (foo, bar)">
  <p>Paragraph including global p and foo and bar styles</p>
</div>
```

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