Implement Constructable Stylesheets
Categories
(Core :: DOM: CSS Object Model, enhancement, P1)
Tracking
()
People
(Reporter: 709922234, Assigned: emilio)
References
(Blocks 3 open bugs, )
Details
(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
I want to apply styles to multiple web components.
Currently, we can only use <link> to do this work.
Updated•6 years ago
|
Assignee | ||
Updated•6 years ago
|
Comment 2•6 years ago
|
||
Chrome 73 has been released with support for Constructable Stylesheets (including adoptedStyleSheets
on DocumentOrShadowRoot
).
Assignee | ||
Comment 3•5 years ago
|
||
(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 aCSSStyleSheet
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 thatConstructable stylesheets
allow you to create a self contained web component that doesn't rely on outside resources to accomplish style. WithConstructable 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).
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Comment 5•5 years ago
|
||
(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
Updated•5 years ago
|
Assignee | ||
Comment 6•5 years ago
|
||
this bug is not fixed itself, only some of the dependent ones are.
Assignee | ||
Updated•5 years ago
|
Comment 7•5 years ago
|
||
Assigning to Erik to represent general ownership of this feature.
Comment 8•5 years ago
|
||
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
Updated•5 years ago
|
Comment 9•4 years ago
|
||
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
Assignee | ||
Updated•4 years ago
|
Assignee | ||
Updated•4 years ago
|
Assignee | ||
Comment 10•4 years ago
|
||
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 11•4 years ago
|
||
¡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 12•3 years ago
|
||
Why is this dependent on https://bugzilla.mozilla.org/show_bug.cgi?id=1683281
The "adoptedStylesheets" array is imutable acording to spec
Comment 13•3 years ago
|
||
Oh, okay... they changed the spec, I've not seen this... https://groups.google.com/a/chromium.org/g/blink-dev/c/8p7QvGn3Ezo
Assignee | ||
Updated•3 years ago
|
Assignee | ||
Comment 14•2 years ago
|
||
I think we can call this fixed. Will file another bug for issues that might come up.
Assignee | ||
Updated•2 years ago
|
Assignee | ||
Updated•2 years ago
|
Comment 15•2 years ago
|
||
The following files refer this bug.
https://searchfox.org/mozilla-central/search?q=1520690
They may need to be updated.
Updated•2 years ago
|
Assignee | ||
Updated•2 years ago
|
Assignee | ||
Comment 16•2 years ago
|
||
Thanks :)
Description
•