search

web-platform-tests / interop

web-platform-tests Interop project
https://wpt.fyi/interop
288 stars 28 forks source link

CSS Module Scripts #703

Open thescientist13 opened 6 days ago

thescientist13 commented 6 days ago

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

Here is a standalone issue for Import Attributes - https://github.com/web-platform-tests/interop/issues/733

thescientist13 commented 6 days ago

Would also add that investing in bringing Import Attributes to baseline would also help unlock https://github.com/web-platform-tests/interop/issues/705 in tandem 🔗

gsnedders commented 6 days ago

This is something like https://wpt.fyi/results/html/semantics/scripting-1/the-script-element?label=master&label=experimental&aligned&q=%28import-attributes%20or%20css-module%29%20and%20not%20assertions