CSS Module Scripts 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: import styleSheet from "./styles.css" assert { type: "css" };
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 module scripts 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.
Docs: Explainer: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md This design doc covers how the feature was implemented using Synthetic Modules: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/SyntheticModules/designDoc.md
Explainers: https://github.com/w3c/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md