1520690 - Implement Constructable Stylesheets

Status: RESOLVED FIXED

(Core :: DOM: CSS Object Model, enhancement, P1)

Description

[709922234]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:66.0) Gecko/20100101 Firefox/66.0

Comment 1

[709922234]

I want to apply styles to multiple web components.

Currently, we can only use <link> to do this work.

Comment 2

[Andy Earnshaw]

Chrome 73 has been released with support for Constructable Stylesheets (including adoptedStyleSheets on DocumentOrShadowRoot).

Comment 7

[Emilio Cobos Álvarez (:emilio)]

(In reply to Lonnie Lee Best from comment #6)

Nothing is faster than a javascript variable that points directly to an object. <link rel="stylesheet"> is a html element that must be parsed before it can even look up the cache of the style sheet. That's going to be slightly slower that a javascript variable that points directly to an already constructed style-sheet object. Plus, I don't like having to depend on whether a browser is smart enough to cache the style-sheet. If I create a CSSStyleSheet object, I know very well it is cached and won't be created more than once.

The performance difference of document.createElement("link") vs. new CSSStyleSheet is in the range of noise, more than likely. <link rel="stylesheet"> can also be parsed off the main thread, which constructable stylesheets as-used via replaceSync by most web-component libraries (unfortunately) cannot. I'm glad that the spec has the async replace() to at least be able to opt into it.

But, even if you mistakenly disagree with my performance wisdom, that's not the most important comparison between Constructable stylesheets and <link rel="stylesheet">. The most important aspect for me, is that Constructable stylesheets allow you to create a self contained web component that doesn't rely on outside resources to accomplish style. With Constructable stylesheets I can build the style sheet, that my web component needs, inside the vary module that also builds the web component, making my module completely self-contained in a single file, where the module contains all that is needed to generate every aspect of the web component. <link rel="stylesheet">, instead, requires you create a separate css file and you must always keep up with that file, placing it somewhere accessible to the web component. Anyone you share your web component with, also has to manage that senselessly separate file that the web-component needs.

Sure, I agree on the convenience benefits of them, no need to discuss on those.

I (note: personally, not in the name of Mozilla) disagree with some of the API shape (see this issue in particular). I'm unfortunately not quite hopeful of google changing the shape of the API they've shipped...

Anyhow, this is on the backlog of the layout team to look at (we don't have infinite resources, and a long list of stuff to do). I'm happy to mentor people into how to prototype an implementation in Gecko (behind a flag until complete and the spec issues are fixed, of course).

In my opinion, that's an anit-pattern; web components should be self-contained (having within them, everything that is needed to get the job done -- without having to juggle outside resources). Constructable stylesheets make that possible and Mozilla needs to get on this now before the train leaves the station. The time is now.

There's no need to do advocacy for the API, there's an official position on it which is not negative. That doesn't make it first in the priority list of course (specially when there are big spec issues open, though that doesn't block an implementation prototype either).

Comment 19

[Sean Voisen (:svoisen)]

(In reply to elefanteblanco5 from comment #17)

Sadly 2019 ends without this great feature :(

Work is starting on this. Intent-to-prototype sent out today:
https://groups.google.com/forum/#!msg/mozilla.dev.platform/d4jO-DUBTE8/JDxCM7nhBAAJ

Comment 23

[Emilio Cobos Álvarez (:emilio)]

this bug is not fixed itself, only some of the dependent ones are.

Comment 24

[Sean Voisen (:svoisen)]

Assigning to Erik to represent general ownership of this feature.

Comment 25

[Sean Voisen (:svoisen)]

Now that we triage by severity, setting priority to P1 to reflect backlog prioritization on this bug as either in-progress, or planned development in the near term. See https://wiki.mozilla.org/Platform/Layout#Backlog_Tracking_in_Bugzilla

Comment 26

[Sebastian Zartner [:sebo]]

As far as I can see, there is no bug yet for letting this feature ride the trains or at least enable the preference on Nightly. What's the plan here?
I am asking because I am currently updating https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Experimental_features and would link to those bugs once they are created.

Sebastian

Comment 27

[Emilio Cobos Álvarez (:emilio)]

I filed those bugs, if it's useful for you. Not sure there's any ETA, there's still some figuring out of how the API should end up looking like / etc.

Comment 28

[Sebastian Zartner [:sebo]]

¡Muchas gracias, Emilio! I've linked them at https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Experimental_features#constructable_stylesheets now and added the related dev-doc-needed flags.

Sebastian

Comment 29

[jochen.kuehner]

Why is this dependent on https://bugzilla.mozilla.org/show_bug.cgi?id=1683281
The "adoptedStylesheets" array is imutable acording to spec

Comment 30

[jochen.kuehner]

Oh, okay... they changed the spec, I've not seen this... https://groups.google.com/a/chromium.org/g/blink-dev/c/8p7QvGn3Ezo

Comment 31

[Emilio Cobos Álvarez (:emilio)]

I think we can call this fixed. Will file another bug for issues that might come up.

Comment 32

[Takanori MATSUURA]

The following files refer this bug.
https://searchfox.org/mozilla-central/search?q=1520690

They may need to be updated.

Comment 33

[Emilio Cobos Álvarez (:emilio)]

Thanks :)