- From: Giuseppe via GitHub <sysbot+gh@w3.org>
- Date: Mon, 28 Jan 2019 08:25:53 +0000
- To: public-css-archive@w3.org
The reason why the `scoped` attribute idea was abandoned is that, in contrast to ShadowDOM, it didn't come with any lower boundary. This means that styles affect an entire subtree rather than a single "component". In fact this is not different from prefixing every selector with a unique id eg. `.foo { }` becomes `#scope-unique-id .foo {}`.
Svelte and Vue, Angular but also styled-jsx instead scope the styles to a single component to simulate ShadowDOM. eg:
```html
<style>
div { color: red }
div h1.foo { color: green }
</style>
<div>
<h1 class="foo">howdy</h1>
</div>
```
in those frameworks becomes:
```html
<style>
div.scoped-123.scoped-123 { color: red }
div.scoped-123 h1.foo.scoped-123 { color: green }
</style>
<div class="scoped-123">
<h1 class="foo scoped-123">howdy</h1>
</div>
```
This is done at build time.
--
GitHub Notification of comment by giuseppeg
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3547#issuecomment-458036425 using your GitHub account
Received on Monday, 28 January 2019 08:25:54 UTC