Closed Bug 1520690 Opened 4 years ago Closed 1 year ago

Implement Constructable Stylesheets


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

66 Branch





(Reporter: 709922234, Assigned: emilio)


(Blocks 3 open bugs, )


(Keywords: dev-doc-needed, Whiteboard: [layout:backlog:2020q1])

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

Component: Untriaged → DOM
Product: Firefox → Core

I want to apply styles to multiple web components.

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

Component: DOM → DOM: CSS Object Model
Ever confirmed: true
Priority: -- → P3

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

(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).

Summary: implement Constructable Stylesheets → Implement Constructable Stylesheets
Whiteboard: [layout:backlog]
See Also: → 1228985

(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:!msg/

Depends on: 1604296
Depends on: 1606727
Depends on: 1607268
Depends on: 1608488
Depends on: 1608489
Depends on: 1609288
Whiteboard: [layout:backlog] → [layout:backlog:2020q1]

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

Depends on: 1609994
Alias: construct-stylesheets
Depends on: 1610164
Depends on: 1611236
Depends on: 1612114

Assigning to Erik to represent general ownership of this feature.

Assignee: nobody → enordin
Depends on: 1613511
Depends on: 1613746
Depends on: 1613748
Depends on: 1614204
Depends on: 1614403
Depends on: 1616407
Depends on: 1616433
Depends on: 1617302
Depends on: 1617746
Depends on: 1617948
Depends on: 1618394
Depends on: 1621415
Depends on: 1621849
Depends on: 1622322
Depends on: 1626005
Depends on: 1627104
Depends on: 1629994
Depends on: 1630835
Depends on: 1630837
Depends on: 1631057
Depends on: 1632686

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

Priority: P3 → P1
Depends on: 1642227
Depends on: 1642228

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 and would link to those bugs once they are created.


Flags: needinfo?(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.

Flags: needinfo?(emilio)

¡Muchas gracias, Emilio! I've linked them at now and added the related dev-doc-needed flags.


Depends on: 1683281
Blocks: 1738347
Depends on: 1737455

Why is this dependent on
The "adoptedStylesheets" array is imutable acording to spec

Oh, okay... they changed the spec, I've not seen this...

Depends on: 1752392
Depends on: 1766227
Depends on: 1768215

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

Alias: construct-stylesheets
Closed: 1 year ago
Resolution: --- → FIXED

The following files refer this bug.

They may need to be updated.

Flags: needinfo?(emilio)
Blocks: 1774226
Flags: needinfo?(emilio)

Thanks :)

Blocks: 1422951
You need to log in before you can comment on or make changes to this bug.