Skip to content

CSS Module Scripts #703

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
Closed
thescientist13 opened this issue Sep 17, 2024 · 5 comments
Closed

CSS Module Scripts #703

thescientist13 opened this issue Sep 17, 2024 · 5 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.

This feature has been highly requested in prior interops

Here is a standalone issue for Import Attributes - #733
@thescientist13 thescientist13 added the focus-area-proposal Focus Area Proposal label Sep 17, 2024
@thescientist13 thescientist13 mentioned this issue Sep 17, 2024
Closed
@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

This was referenced Sep 18, 2024
Closed
Closed
@Westbrook Westbrook mentioned this issue Oct 7, 2024
Open
@thescientist13
Copy link
Author

Import Attributes are now stage 4! - #733 (comment)

@thescientist13 thescientist13 mentioned this issue Jan 16, 2025
Open
@wpt-interop
Copy link
Collaborator

Thank you for proposing CSS Module Scripts for inclusion in Interop 2025.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

On behalf of the entire Interop team, thank you for submitting this proposal for consideration. We got many more proposals than we could include in this year's project, necessitating some difficult choices. Please note this should not be taken as a comment on the technology as a whole, or our willingness to consider it for Interop in the future. We appreciate the work you put into your proposal, and would welcome your participation in future rounds of Interop.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2025.

Posted on behalf of the Interop team.

@foolip
Copy link
Member

foolip commented Feb 20, 2025

Interop 2025 launched last week and I've been going through comments and reactions on proposals and then closing them. I see there are som 😕 reactions here, so I understand the outcome isn't what you had hoped for.

I think the proposal was clearly scoped so if you want to submit it again in the future there isn't anything that needs improving. I did go and look for the tests and associated them with web-features. This means you'll be able to follow any progress at https://webstatus.dev/features/css-modules (not a part of the Interop program!) and this link should work soon to list all tests:
https://wpt.fyi/results/?label=master&label=experimental&aligned&q=feature%3Acss-modules

I'll go ahead and close the issue now, and thank you again for proposing it!

@foolip foolip closed this as completed Feb 20, 2025
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: Done
Milestone
No milestone
Development

No branches or pull requests
4 participants
@gsnedders @foolip @thescientist13 @wpt-interop