<style scoped> was a very interesting idea, in practice it had a number of issues though like poor fallback (the styles become global in browsers without support which breaks pages) and implementation complexity because the root of a tree no longer defines the styles.

There were other reasons at the time as well, as mentioned in the linked email: the feature wasn't owned, wasn't shipping in any browser, and was making it difficult to improve the Shadow DOM styling system which was shipped already.

That was also a long time ago, and I think browsers and standards groups have learned a lot about designing features to be backwards compatible and how to avoid certain implementation complexities.

It's alive and well in Vue.js single-file components (SFC). Once built, it is implemented by using data attributes in the CSS selectors.

Component-scoped styles is a very handy feature. It could be achieved just by leveraging selector specificity, but that's rather complex and a lot of people hate CSS so less cognitive overhead is better.

This is why I love Vue. It's basically the nightly version of HTML/CSS/JS. The syntax from this article is already familiar from Vue. It extends web standards, rather than replacing them, IMO.

> wasn't shipping in any browser

I've seen it work on Chrome, Firefox and Edge. But at the time I discovered it, Chrome had already scheduled it for exclusion.

I'm pretty sure it was never implemented in Edge and I know it was never shipped in Chrome, but you're right I misspoke above.

It was shipping in Firefox when I removed it from Chrome. It was moved behind a flag in Firefox shortly after and then support was removed.

https://caniuse.com/style-scoped