6

Chrome 73 shipped with support for constructable stylesheets which allow for the creation of distributable & reusable styles.

Their announcement reads:

It’s always been possible to create stylesheets using JavaScript. Create a element using document.createElement('style'). Then access its sheet property to obtain a reference to the underlying CSSStyleSheet instance, and set the style.

Using this method tends to lead to style sheet bloat. Even worse, it causes a flash of unstyled content. Constructable Stylesheets make it possible to define and prepare shared CSS styles, and then apply those styles to multiple Shadow Roots or the Document easily and without duplication.

  1. Do constructable style sheets offer a noticeable improvement in performance (rendering time & memory consumption) vs updating the CSS of an element via JavaScript?
  2. Are there any performance benchmarks for constructable style sheets?
Eugene
  • 10,957
  • 20
  • 69
  • 97
  • You add an DOM element with `document.createElement("style");`. Then you add the css properties as text and add them to DOM again. Why not just placing it directly into the head-tag? It makes sense, that putting into head beeing faster then adding later, because the browser instantly knows what to to and can render the site as the javascript needs to parsed in extra steps adding new values into DOM. – Markus Zeller May 17 '19 at 19:42
  • 3
    I think it can really depend on the project. I've been doing a lot with Shadow DOM recently and Constructable Stylesheets are crucial in cutting down on network requests and redundant styles written to the DOM in the shadow-root of every instance of a custom element. I am still not sure exactly how it's working under the hood, but can see obvious improvements to my Lighthouse audits. – Kevin H. Mar 13 '20 at 19:44

0 Answers0