Never even heard of the latter, though Christian Wattengård's answer explains why... but as to the so-called "shadow DOM" that always just struck me as another of these bits of BS terminology someone slapped in there to take something -- that you should NEVER even be thinking about or worrying about -- and make it sound more important than it is.
Likely stemming from that same 'fear of ACTUALLY using the DOM' that led to such ignorant halfwitted nonsense as that "Virtual DOM" asshattery. That seems to exist JUST so incompetent fools can keep sleazing along using innerHTML instead of manning up and learning to use the various document.createxxx methods!
See this article developers.google.com/web/fundamentals/web-compon…
...and how it makes up all sorts of lame excuses and ignorant broken dumbass approaches to hooking onto things JUST to continue justify using innerHTML despite some two decades of our knowing it's anywhere from 30 to 200 times slower than using the DOM properly.
That's some serious herpa-freaking-derp right there. Likely stemming from what they call being a drawback being THE ENTIRE HUFFING POINT of using createElement!!!
How to make things more complicated, bloated, and slower -- whilst selling people on it being somehow magically easier with propaganda and coasting on reputation; and because it's Google the jobbers and bobbers just nod in mindless agreement like sheep on their way to the slaughterhouse.
YMMV, but the moment I see innerHTML= in a codebase, I automatically assume it was written by an ignorant incompetent moron... with the possible exception of innerHTML = ''; Since an empty assignment can be faster than a node flush if there's a LOT of nodes.
In case you don't know what a node flush is:
while (element.firstChild) do element.removeChild(element.firstChild);
Which CAN be faster if there are around 50 or less elements. More than 50 elements to remove innerHTML = ''; does the same thing and is faster.
But I would NEVER, EVER write code like this:
shadowRoot.innerHTML = `
<style>#tabs { ... }</style> <!-- styles are scoped to fancy-tabs! -->
<div id="tabs">...</div>
<div id="panels">...</div>
`;
OH HELL NO!!! and it's not just the innerHTML, don't even get me started about the bloody STYLE tag...
So much of this stuff reeks of these people working in JS not knowing enough about HTML or CSS to be telling others how to do a damned thing with web technologies!