I love custom elements! I've been building UIs with them since Polymer 0.5 was announced in 2014. One of the things that I've questioned with custom elements has been Shadow DOM and its relationship to CSS. This page is an experiment for comparing custom elements with and without Shadow DOM. Press the buttons below and 1,000 spinners will be displayed on the page, when 'Light' is pressed the custom element uses CSS defined for the whole page, and when 'Shadow' is pressed the custom elements have a style sheet attached to their Shadow DOM, and when 'External' is pressed the CSS for the element is still encapsulated in the Shadow DOM, but it is loaded as an external stylesheet.
N.B. I am not loading any polyfills on this page, so it will only work on browsers with native custom elements support.
This is the code that is running:
spinner-shadow element follows the suggested best practice of encapsulating the styles via the shadow
root. But this seems problematic for a couple of reasons. The first is that
it's going to be difficult to pass that CSS through an autoprefixer or any
other tooling. The second problem is that this means the CSS will get
duplicated for every instance of the element. You can see that by looking
in Chrome Dev Tools, that there are 3,000 more nodes on this page when the
shadow spinners are displayed as compared to when the light spinners are
spinner-external loads the CSS in the Shadow DOM but uses
an external stylesheet, which does seem to reduce the number of nodes to
below that of the
spinner-shadow, but still not close to
spinner-light. Also, I don't want to have a separate HTTP
request for every element class I use on a page, so this also seems like
So am I holding it wrong? Is there really no way in custom elements to specify the CSS for an element once without resorting to external CSS stylesheets? Or am I reading the Chrome Dev Console page wrong and the Node count doesn't mean what I think it means? I think for now I'm going to stick to avoiding Shadow DOM and specifying the CSS just once in a single stylesheet.
Update: It does look like this is a known issue as there's a proposal to address it in custom elements spec.