Measures DOM creation, ShadowRoot instantiation, flat-tree construction, and initial style recalculation cost across 250 component instances (comparing 20 Light vs. 1+19 Shadow vs. Slotted Seam, and 40 Light vs. 1+39 Shadow).
Inside each iteration, 250 component instances (5,000 total nodes for 20-node components; 10,000 total nodes for 40-node components) are cloned, attached to the document, and
forced through style recalculation (without layout) via
getComputedStyle($container).color.
Shadow DOM with adoptedStyleSheets has a small fixed per-instance attachShadow() cost that amortizes as component size grows from 20 to 40 nodes.
Projecting nodes across a <slot> seam adds flat-tree slot assignment overhead.
| Scenario | Topology | Description | Speed | Relative Performance |
|---|