←
🏠 Home

Scoped CSS - Stop using <style scoped> in 2023 and beyond

❗ TL;DR: Stop using <style scoped> in 2023 and beyond! ❗

The scoped attribute is deprecated since 2016 ☠ , so once again, please stop using it.

If you don’t know know what scoped styles are, they are a way to override styles based on proximity in the DOM.

Don’t use scoped styles

The critical reason to not use this is because of browser support. The browser support for it is extremely poor, for instance, Chrome has removed scoped styles implementation. Up until Chrome 36 in 2014, we can enable it in Chrome from “experimental Web Platform features” flag in chrome://flags. FYI, we are at Chrome 117 now, as you can see this feature has been long gone but yet, we still see developers using it. And of course, none of the other browsers support this.

The Arguments

You might argue we can use PostCSS to transform it. Well, unless you are using Vue.js, please don’t use it because why would you want to add additional complexity when there are better solutions.

The last argument is to just use a polyfill. Here are some:

Just don’t use it, why bother with the hassle.

Solutions

There are a lot more solutions out there:

  • ShadowDOM
  • CSS @scope - probably too early for adoption but it is coming in Chrome 18 and only Chrome & WebKit/Safari are on board while Mozilla/Firefox is not yet