Add support for Shadow DOM/Custom elements

[Schweinepriester]

First of all, thanks very much for creating dom-to-svg as well as svg-screenshots!
From all the HTML-to-SVG stuff I've tried, dom-to-svg works best, almost perfect.

One thing that appears to be missing though is support for Shadow DOM/Custom elements, correct?

Probably easiest to discuss on my use case:

I'm looking into building "svgcaniuse", SVGs of caniuse.com, e.g. https://caniuse.com/web-share.

Using svg-screenshots to capture the viewport of https://caniuse.com/web-share results in this:

Because the DOM looks like this:

I've tried my way around the first shadow-root like so using DevTools:

const { elementToSVG, inlineResources } = await import('https://cdn.skypack.dev/dom-to-svg');
// notice the shadowRoot
const svgDocument = elementToSVG(document.querySelector('ciu-feature-list').shadowRoot.querySelector('.feature-list-wrap'));
await inlineResources(svgDocument.documentElement)
const svgString = new XMLSerializer().serializeToString(svgDocument);

But "of course" the resulting svgString only contains the equivalents of .feature-list-wrap and <ciu-feature> (without any children since it's got the next shadow-root), i.e. just a brown background:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-stacking-context="true" aria-owns="feature-list-wrap1" width="1316.21875" height="656.40625" viewBox="56.890625 194 1316.21875 656.40625"><!-- Generated by dom-to-svg from https://caniuse.com/web-share --><style>@font-face { font-family: "open sans"; src: url("https://caniuse.com/fonts/open-sans-regular.woff2") format("woff2"); font-display: swap; font-weight: normal; font-style: normal; }
@font-face { font-family: "open sans"; src: url("https://caniuse.com/fonts/open-sans-300.woff2") format("woff2"); font-display: swap; font-weight: 300; font-style: normal; }
@font-face { font-family: "open sans"; src: url("https://caniuse.com/fonts/open-sans-700.woff2") format("woff2"); font-display: swap; font-weight: 700; font-style: normal; }
</style><g data-stacking-layer="rootBackgroundAndBorders"/><g data-stacking-layer="childStackingContextsWithNegativeStackLevels"/><g data-stacking-layer="inFlowNonInlineNonPositionedDescendants"/><g data-stacking-layer="nonPositionedFloats"/><g data-stacking-layer="inFlowInlineLevelNonPositionedDescendants"/><g data-stacking-layer="childStackingContextsWithStackLevelZeroAndPositionedDescendantsWithStackLevelZero"/><g data-stacking-layer="childStackingContextsWithPositiveStackLevels"/><g data-tag="div" id="feature-list-wrap1" class="feature-list-wrap" data-z-index="auto" data-stacking-context="true" aria-owns="web-share"><g data-tag="ciu-feature" id="web-share" data-z-index="auto" data-stacking-context="true"><g data-stacking-layer="rootBackgroundAndBorders"><rect width="1316.21875" height="656.40625" x="56.890625" y="194" fill="rgb(37, 32, 23)"/></g></g><text color="rgb(0, 0, 0)" dominant-baseline="text-after-edge" font-family="&quot;Open Sans&quot;, Helvetica, Arial, sans-serif" font-size="16px" font-stretch="100%" font-style="normal" font-variant="normal" font-weight="400" direction="ltr" letter-spacing="normal" text-decoration="none solid rgb(0, 0, 0)" text-anchor="start" text-rendering="auto" unicode-bidi="normal" word-spacing="0px" writing-mode="horizontal-tb" user-select="auto" fill="rgb(0, 0, 0)"/><text color="rgb(0, 0, 0)" dominant-baseline="text-after-edge" font-family="&quot;Open Sans&quot;, Helvetica, Arial, sans-serif" font-size="16px" font-stretch="100%" font-style="normal" font-variant="normal" font-weight="400" direction="ltr" letter-spacing="normal" text-decoration="none solid rgb(0, 0, 0)" text-anchor="start" text-rendering="auto" unicode-bidi="normal" word-spacing="0px" writing-mode="horizontal-tb" user-select="auto" fill="rgb(0, 0, 0)"/></g></svg>

Not sure if that would suffice, but basically something like this could make it work:

if (element.childElementCount === 0 && element.shadowRoot !== null) {
  // use element.shadowRoot to continue traversal
}

I've had a look at the source but wasn't confident enough to start a PR.
Would be great though if dom-to-svg would work with Shadow DOM :)