[csswg-drafts] [css-cascade-6] A way for <style> elements to scope to their parent element (#6606)

dfabulich has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-cascade-6] A way for <style> elements to scope to their parent element ==
https://drafts.csswg.org/css-cascade-6/#scoped-styles

The [explainer](https://css.oddbird.net/scope/explainer/#references--acknowledgements) references this issue: [Please bring back scoped styles](https://github.com/w3c/csswg-drafts/issues/3547).

Either there's something missing from the spec or I'm missing it, which is a way to have a `<style>` element that gets scoped to its own parent element.

```html
<div>
  <style scoped>p { color: red; }</style>
  <p>red</p>
</div>
```

`<style scoped>` would guarantee that the color only applied to children of the parent div.

I could do it by adding a unique ID or attribute:

```
<div id="foo">
  <style>#foo p { color: red; }</style>
  <p>red</p>
</div>
```

… this is basically what Vue does at build time. But I want the same effect without a build step!

I think we'd want something like `@scope(:style-parent)`. Otherwise, even with `@scope` back in play, I'd still have to use a build tool (or something) to generate an ID for the upper bound of the scope.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6606 using your GitHub account


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

Received on Monday, 13 September 2021 16:17:22 UTC