Constructable Stylesheets

[rakina]

Bonjour TAG,

I'm requesting a TAG review of:

• Name: Constructable Stylesheets
• Specification URL: https://wicg.github.io/construct-stylesheets/index.html
• Explainer, Requirements Doc, or Example code: https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md
• Tests: Not in WPT yet, but there are some in chromium LayoutTests
• Primary contacts: @rakina @tabatkins

You should also know that...

There might be small API changes due to current open issues but the basic idea should stay the same, that is to allow creating CSSStyleSheet objects and use them in DocumentOrShadowRoot.adoptedStyleSheets.

Open issues that might need further attention:

• Can the same constructed stylesheet be used in two different Documents? Can the same constructed stylesheet be used in two different Documents? WICG/construct-stylesheets#23
• Fetch group for loads from a constructed stylesheets Need to define what fetch groups various loads from the sheet go in WICG/construct-stylesheets#15

We'd prefer the TAG provide feedback as (please select one):

• open issues in our Github repo for each point of feedback
• open a single issue in our Github repo for the entire review
• leave review feedback as a comment in this issue and @-notify [github usernames]

[kenchris]

Why doesn't the explainer have any info on how this relates to CSS Shadow Parts? https://drafts.csswg.org/css-shadow-parts/

They seem somewhat related

[plinss]

I already raised an issue about using real constructors WICG/construct-stylesheets#57

[kenchris]

Talking to @plinss, I now see the reason for this, but it is something we need web component authors to use and adopt when creating their custom elements, so I think it would be great if you could show a full example on how this would work in the explainer - basically showing the developer experience for using this feature

[tabatkins]

Why doesn't the explainer have any info on how this relates to CSS Shadow Parts?

They're not particularly related, as far as I can tell. Shadow Parts exposes chunks of shadow DOM to the outside world for styling purposes; Constructable Stylesheets helps shadow-DOM-using elements style themselves efficiently (plus some other use-cases unrelated to shadow DOM). They're pretty distinct and have no real interaction with each other.

[rakina]

Talking to @plinss, I now see the reason for this, but it is something we need web component authors to use and adopt when creating their custom elements, so I think it would be great if you could show a full example on how this would work in the explainer - basically showing the developer experience for using this feature

By full example, do you mean adding something like

const style = new CSSStyleSheet();
style.replace(":host { color: red; }");
class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.adoptedStyleSheets = [style];
  }
};

vs the old way?

class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = '<style>:host { color: red; }</style>';
  }
};

[kenchris]

@rakina yes, exactly. Like what is the proper way to construct this and the developer ergonomics - how are we going to recommend developers use this?

• globally (or scoped to module) - ie. outside of the custom element (as in your example) which means that just importing a web component will end up constructing the CSS before it is being used
• as part of a static getter or similar that can be called in the constructor / connectedCallback
• other solutions?

[kenchris]

I see that there is a PR (WICG/construct-stylesheets#61) that changes the API and which has not been merged

[rakina]

@kenchris I see, I'll update the explainer to have some examples like that then (once my PR is merged)

[rakina]

The new methods PR had been merged and the explainer has been updated. The explainer isn't currently addressing your points though. I think for your first point something like this might make sense:

const myElementSheet = new CSSStyleSheet();
class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: "open"});
    shadowRoot.adoptedStyleSheets = [myElementSheet];
  }
  
  connectedCallback() {
    // Only actually parse the stylesheet when the first instance is connected.
    if (myElementSheet.cssRules.length == 0) {
       myElementSheet.replaceSync(styleText);
    }
  }
}

Looks reasonable to me but I might be wrong.

[kenchris]

Yes the example looks fine, please add it to the spec so that it is clear how it is supposed to be used. Filed WICG/construct-stylesheets#66

[dbaron]

Thanks for submitting this for TAG review. We've looked at this and this generally seems pretty good -- while we're still poking at a few of the details, we're happy with closing the issue at this point.