From discussion in https://github.com/w3c/webcomponents/issues/468#issuecomment-370665411, we are providing a way to assign a CSSStyleSheet to a custom element definition.
1) existing API
class MyElement extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `<style>:host { color: blue }</style><slot></slot>`;
}
}
window.customElements.define('my-element', MyElement);
(2) proposed API
var css = new CSSStyleSheet(':host { color: blue}');
class MyElement extends HTMLElement {}
window.customElements.define('my-element', MyElement, css);
From discussion in https://github.com/w3c/webcomponents/issues/468#issuecomment-370665411, we are providing a way to assign a CSSStyleSheet to a custom element definition.
1) existing API
class MyElement extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `<style>:host { color: blue }</style><slot></slot>`;
}
}
window.customElements.define('my-element', MyElement);
(2) proposed API
var css = new CSSStyleSheet(':host { color: blue}');
class MyElement extends HTMLElement {}
window.customElements.define('my-element', MyElement, css);
Every instance of my-element will behave as if there is a shadow root with |css| as its only stylesheet, but there's no actual shadow roots and the custom element can add its own shadow root and styles to override the default style from |css|.
I've redone the tests, with varying number of elements and done 1000 runs for each case. It seems like my initial impression was wrong - there isn't a significant difference in performance between the UA vs fake-shadow-root version when the number of elements are in the hundreds. When they reach thousands the UA version is a bit slower but not by much, around < 3% slower, so I guess it is because of the difference between ElementRuleCollector::CollectMatchingRules and ElementRuleCollector::CollectMatchingShadowHostRules. They're both still way faster than using shadow root + <style>.
I've updated the doc at
https://docs.google.com/document/d/1aA1emBlA20nVB0bmkcamjFdPEvcoBuRbp6p8QKcPz80/edit#heading=h.vmv4o980xwad and also linked to the raw data from there.
Just wanna clarify the microbenchmark result:
Using custom element default style + no shadow root is 70%-80% faster than the old way of using shadow root + style element.
Comment 1 by rakina@chromium.org
, Mar 22 2018