Intent to Implement: Default Style for Custom Elements
Takayoshi Kochi
Contact emails
ko...@chromium.org, rak...@chromium.org
Explainer
Design doc/Spec
No spec is formally written yet. Based on the initial implementation feedback, changes
will be added to the CSS/HTML specs, and further details should be worked out.
Implementation tracking bug is crbug.com/824684
Summary
Give an ability to specify default style for custom elements when they are registered.
The new API surface is to add a “style” option whose value is an instance of
CSSStyleSheet in Custom Element’s definition option. E.g.
window.customElements.define('my-element', MyElement, { style: styleSheet });
Motivation
The background for this was a proposal at webcomponents#468.
In short,
Give a capability like UA-stylesheet to custom elements
Avoid overhead of adding stylesheet in its shadow root
Using custom elements with its default style has had overhead of constructing shadow root
and style for each instance, which made it slower than native HTML elements.
The proposal is to reduce the overhead to achieve performance as much closer to native
elements as possible (e.g. crbug.com/789729).
Risks
Interoperability and Compatibility
There was rough consensus to move this forward in the last W3C Web Components F2F
in March 2018 (minutes). The API is still in design phase and is subject to change.
The objective of implementing this is to get early feedback on performance to decide
how we move forward.
Edge: not opposed
Firefox: Public support
Safari: Public support
Web developers: Positive
Ergonomics
This will make using custom elements styling easier.
Activation
This is an incremental extension to the current Custom Elements APIs, and will not break any
backward compatibility.
Debuggability
As an implementation detail, we might add a fake shadow root which should be invisible to web and
inspector, so some changes
may be necessary to the inspector code.
Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
Yes
Link to entry on the feature dashboard
https://www.chromestatus.com/features/5140940264046592
Requesting approval to ship?
No
Anne van Kesteren
> Design doc
Is there a reason for this document to have restricted access? I'm
somewhat curious how no new architecture on top of shadow root
stylesheets, while :host still has to do something is proposed to be
resolved.
--
https://annevankesteren.nl/
Rakina Zata Amni
Is there a reason for this document to have restricted access?
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CADnb78gARfifKUeRdKc-3j3O_JRUhj7Qs2rvY6aXMAaTz%3DSXOQ%40mail.gmail.com.
Anne van Kesteren
>> Is there a reason for this document to have restricted access?
>
> Whoops, sorry. I changed it so that it can be accessed by anybody with the
> link now.
in the standards and what kind of other unexpected side effects a
"fake shadow root" might bring us in the future. It seems like a
rather magical concept.
--
https://annevankesteren.nl/
Rune Lillesveen
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACPC1r5BXnYcw%3D5XYbkNee_mMCqd2H1wYHL8FfmCNTgUqDOP6w%40mail.gmail.com.
