https://drafts.csswg.org/css-cascade-6/#scoped-styles

The explainer references this issue: Please bring back scoped styles.

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.

<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).

<div>
  <style>@scope(:style-parent) { p { color: red; } }</style>
  <p>red</p>
</div>

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.