3 ms·

Chrome was at one point developing a `scoped` attribute on the `<style>` element for scoping stylesheets that would not require WebComponents. `<style scoped>`

Chrome was at one point developing a `scoped` attribute on the `<style>` element for scoping stylesheets that would not require WebComponents. `<style scoped>` However, it was abandoned partly because it "adds a lot of complexity to how the scoped style system works for Shadow DOM". https://chromestatus.com/feature/5374137958662144 https://chromestatus.com/feature/5374137958662144 https://groups.google.com/a/chromium.org/g/blink-dev/c/R1x18ZLS5qQ/m/Bjuh_cENhlQJ https://groups.google.com/a/chromium.org/g/blink-dev/c/R1x18...

esprehn 6y ago
<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.
- ficklepickle 6y ago
  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.
- marcosdumay 6y ago
  > 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.
  - esprehn 6y ago
    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 https://caniuse.com/style-scoped

esprehn 6y ago

ficklepickle 6y ago
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.
marcosdumay 6y ago
> 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.
- esprehn 6y ago
  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 https://caniuse.com/style-scoped