Shadow DOM – No noticeable performance gains found
I recently implemented the option to make &quot;shadow components&quot; in a library I&#x27;m building (Zam: http:&#x2F;&#x2F;zamjs.com), and I&#x27;ve found no performance gains -- contrary to certain claims.<p>I&#x27;m speaking about rendering in particular.<p>I built 50 components with shadow dom, and set the style of a single parent node of one of the components to<p><pre><code>    transition:all 1s linear;
    color:red;
    font-size:100px;
    background-color:blue;
</code></pre>
I did the same thing for 50 components without shadow dom.<p>I found there&#x27;s no significant diff in performance times.<p>Which makes sense to me, because the layout root is always #document. It&#x27;s not like the shadow DOM has its own layout root.<p>But these sources suggest there should be a gain in performance.<p>https:&#x2F;&#x2F;stackoverflow.com&#x2F;questions&#x2F;36012239&#x2F;is-shadow-dom-fast-like-virtual-dom-in-react-js<p>https:&#x2F;&#x2F;meowni.ca&#x2F;posts&#x2F;shadow-dom&#x2F;<p>Am I missing something? Has anyone else done performance tests with the Shadow DOM?<p>Maybe if I did 10,000 components I would notice a difference?