Constructable Stylesheets

[rakina]

Request for Mozilla Position on an Emerging Web Specification

• Specification Title: Constructable Stylesheets
• Specification or proposal URL: https://wicg.github.io/construct-stylesheets/
• Mozillians who can provide input (optional): @bzbarsky @annevk @marcoscaceres

Other information

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. See also explainer.

[marcoscaceres]

I'm not an expert in this area, but I'm wondering how this relates to "CSS in JS". There are a ton of libraries that do "CSS in JS", then output a component-specific stylesheet (via webpack, babel, or whatever).

How does this proposal play with those?

[rakina]

Hmm, I'm not sure if I'm getting this right, but looks like most CSS-in-JS doesn't work with shadow DOM. The basic idea seems to be similar, though generated CSS-in-JS will be creating a real style element put into the document so it can't cross through shadow boundaries.

Also, I don't think we can create complex selectors with CSS-in-JS (probably I'm wrong)? With constructable stylesheets, we can get the full feature of CSS.

[marcoscaceres]

@rakina would it be worth me bringing in some "CSS in JS" folks to comment? I know a few that would be really interested in this, and might have some suggestions about what they need. However, happy to hold off too if you think you are not there yet with the proposal.

[rakina]

@marcoscaceres Oh, I'd be happy to have more people giving suggestions! Yes please, I think that would be really helpful. Thanks!

Also FYI, I intend to bring this topic for discussion in the CSSWG session at TPAC this year (https://wiki.csswg.org/planning/tpac-2018)

[marcoscaceres]

Ok, cool. Let me ping a few devs. Hopefully they will be willing to comment!

[rakina]

Another thing that might be related to Constructable Stylesheets & CSS-in-JS: CSS Modules WICG/webcomponents#759

[dbaron]

I think the basic idea here is reasonable, and while it's not clear to me how we'd prioritize it, and I also suspect the specification needs a good bit of further work to be defined precisely enough and integrate properly with other specifications, it seems like a reasonable addition to the platform, so I'd be inclined to mark it as worth prototyping.

Does that seem reasonable to the others here?

[heycam]

I think the general idea seems OK. There are probably other ways you could come up with to solve the problem of avoiding duplication of style sheets between different instances of a Web Component, but an API to create individual, sharable style sheets to insert into different shadow trees is a reasonable way to do it.

[dbaron]

I've heard secondhand that webkit folks are opposed to this; I'm not entirely sure where that came from, but curious if @hober knows.

[emilio]

Most of the opposition was to the "introducing new cascade origin" bit which is gone from the spec IIRC.