Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS Module Scripts #703

Open
thescientist13 opened this issue Sep 17, 2024 · 2 comments
Open

CSS Module Scripts #703

thescientist13 opened this issue Sep 17, 2024 · 2 comments
Labels
focus-area-proposal Focus Area Proposal

Comments

@thescientist13
Copy link

thescientist13 commented Sep 17, 2024 •
edited
Loading

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.
@thescientist13 thescientist13 added the focus-area-proposal Focus Area Proposal label Sep 17, 2024
@thescientist13 thescientist13 mentioned this issue Sep 17, 2024
Open
@thescientist13
Copy link
Author

thescientist13 commented Sep 17, 2024 •
edited
Loading

Would also add that investing in bringing Import Attributes to baseline would also help unlock #705 in tandem 🔗

@gsnedders
Copy link
Member

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

@thescientist13 thescientist13 mentioned this issue Sep 18, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
focus-area-proposal Focus Area Proposal
Projects
Interop 2025
Status: No status
Milestone
No milestone
Development

No branches or pull requests
2 participants
@gsnedders @thescientist13