CSS Modules

CSS Modules are an extension of the ES Script Modules system that allows web developers to load CSS into a component definition in a manner that interacts seamlessly with other module types. See also, HTML Modules and JSON Modules.

Motivation

Solutions for including CSS in component definitions are lacking. Current practices all have one or more of the following rough edges: 1. Side effects like appending <style> elements to the document. If this is done in the top-level scope of the document then it breaks shadow root style scoping. If it is done inside a shadow root then each individual instance of the component must include its own <style> element in its shadow root instance. 2. Inlined CSS text as a string in JavaScript. This is not optimally performant (it's processed by both the JS and CSS parsers) and is a poor developer experience. 3. Dynamically fetch()ing CSS is generally not statically analyzable and requires careful dependency management by the developer for complex applications. CSS modules solves these issues by extending the ES modules infrastructure to allow importing a CSSStyleSheet object from a CSS file, which can then be added to the document or a shadowRoot via the adoptedStyleSheets array.

Documentation

Status in Chromium

Blink>HTML>Script


In development (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • No signal
  • Positive
  • No signal
  • Positive

Owners

Last updated on 2020-10-07