A custom element clones a <style> block into every instance's shadow root, and one page renders several hundred instances. What does that cost, and what changes if the component assigns to shadowRoot.adoptedStyleSheets instead?

## What the per-instance <style> actually costs The idiomatic first version of a component puts markup and CSS in one template and clones it: ```js const tpl = document.createElement('template'); tpl.innerHTML = `<style>/* 200 lines */</style><div class="body"></div>`; class MyRow extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }).append(tpl.content.cloneNode(true)); } } ``` That is correct and, for a handful of instances, entirely fine. At several hundred instances the arithmetic changes. Each root now holds its own `<style>` element and its own `CSSStyleSheet` in the CSSOM, with its own `cssRules` list. Engines can share some parsed representation for identical text, but you still pay for a node per instance, a sheet object per instance, and the work of attaching that sheet to the tree when the element is inserted. On a table with 500 rows, that shows up as slower insertion and a heavier heap — and it is a cost that grows with a number the component author does not control. There is a maintenance cost too: styles live inside the cloned markup, so a runtime change means walking every root. ## What adoptedStyleSheets changes `DocumentOrShadowRoot.adoptedStyleSheets` is an array of *constructed* stylesheets that a document or shadow root applies in addition to whatever `<style>`/`<link>` it contains. The sheet is built once, at module scope: ```js const sheet = new CSSStyleSheet(); sheet.replaceSync(` :host { display: table-row } .body { padding: 4px 8px } `); class MyRow extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: 'open' }); root.adoptedStyleSheets = [sheet]; root.append(tpl.content.cloneNode(true)); // template no longer carries <style> } } ``` Now one `CSSStyleSheet` object exists no matter how many instances render. Parsing happens once, at module evaluation. Adopting is a cheap array assignment rather than a node insertion. And because every root references the same object, mutating it propagates: a later `sheet.replaceSync(newCss)` — or `sheet.insertRule(...)` — updates every adopting root in one step, with no traversal. The array is ordinary and mutable in current browsers, so a root can combine sheets and add one later: ```js root.adoptedStyleSheets = [baseSheet, variantSheet]; root.adoptedStyleSheets.push(extraSheet); ``` In the original implementation the array was frozen and had to be reassigned wholesale; mutation landed in Chrome 99, Firefox 101 and Safari 16.4, so on anything current either style works. ## The rules and the sharp edges - **Only constructed sheets.** You may adopt a sheet created with `new CSSStyleSheet()`. Assigning a sheet obtained from `document.styleSheets` or from a `<style>` element's `.sheet` throws — the platform does not let you re-home a sheet that already belongs to a tree. - **Same document.** A constructed sheet is associated with the document it was constructed in. Adopting it into a root in a different document (an `<iframe>` document, for instance) is not allowed; construct it there instead. - **`@import` is not honoured** in a constructed stylesheet, so `replaceSync` cannot pull in another file. Inline everything, or fetch the text yourself and pass it in. - **`replace()` vs `replaceSync()`.** `replaceSync(text)` applies synchronously and is what component constructors use. `replace(text)` returns a promise and exists for the asynchronous case; both wipe the sheet's existing rules first. - **Ordering.** Adopted sheets are applied after the tree's own `<style>` and `<link>` sheets, which matters when a component keeps a small inline block for per-instance overrides. ## When the simple version is still right Do not reach for this reflexively. If a component renders a handful of times per page, the per-instance `<style>` is simpler, keeps CSS next to markup, and needs no build step to turn a `.css` file into a JS string. `adoptedStyleSheets` earns its place when instance counts are large or unbounded (rows, cells, list items, chips), when several roots must share one sheet whose rules change at runtime, or when you want the sheet parsed once during module load rather than at first render. The honest senior answer is a threshold answer: name the mechanism, name the cost it removes, and say that the cost only matters above a certain instance count — then say how you would confirm it with a memory snapshot and an insertion-time measurement rather than assuming.