interop
interop copied to clipboard
web-platform-tests
CSS Module Scripts
Description
CSS Module Scripts are an already accepted web standard building on top of Import Attributes / Assertions and Constructable Stylesheets.
With CSS Module Scripts, at least for first party Web Components, developers would have a standards compatible way to not only import CSS into their Web Components, but also to share styles across the Shadow and Light DOM.
I made a little demo repo you can check out and hosted here (Vercel), which showcases a custom element importing a global "theme.css" in addition to its own component styles, highlighting the style sharing opportunities between light and shadow DOM.
import themeSheet from './theme.css' with { type: 'css' };
import componentSheet from './component.css' with { type: 'css' };
const template = document.createElement('template');
template.innerHTML = `
<h2>This should be blue and centered (theme.css)</h2>
<h3>This should be red and centered (component.css)</h3>
`;
export default class SomeComponent extends HTMLElement {
connectedCallback() {
if (!this.shadowRoot) {
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
this.shadowRoot.adoptedStyleSheets = [themeSheet, componentSheet];
}
}
customElements.define('some-component', SomeComponent);
<!DOCTYPE html>
<html>
<head>
<title>CSS Module Scripts Demo</title>
<script type="module" src="./some-component.js"></script>
<script type="module" src="./some-other-component.js"></script>
<link rel="stylesheet" href="./theme.css"/>
</head>
<body>
<h1>CSS Module Scripts Demo</h1>
<some-component></some-component>
<some-other-component></some-other-component>
</body>
</html>
I think advancing CSS Module Scripts would be an extremely valuable addition to the platform across all browsers, as managing CSS otherwise is often a pain point, either requiring some sort of build tooling to inline CSS into <style> tags within the <template> of the Shadow Root or some other form of scripting to "adopt" <link> tags into adoptedStyleSheets.
Specification
WHATWG
Additional Signals
CSS Module Scripts and already implemented in Chrome, and have positive positions from both Webkit and Firefox.
This feature has been highly requested in prior interops
- https://github.com/web-platform-tests/interop/issues/597
- https://github.com/web-platform-tests/interop/issues/206
Here is a standalone issue for Import Attributes - https://github.com/web-platform-tests/interop/issues/733
