Add Shadow DOM support to Elements tab

[CaterpyOwO]

I think, it'd be a great enhancement if we could inspect the shadowRoot on HTML elements, as currently it is completely unsupported by eruda.

[uplusion23]

I haven't gotten too much into Eruda's structure, or how it builds the UI elements, but the areas I see that catch my attention are
Line 115 in Eruda-DOM/index.js, and Line 291 in Eruda/Elements.js.

The code can be adjusted as follows;

eruda-dom/src/index.js Line 115

// From
const childCount = child.childNodes.length;
// To
const childCount = (!child.shadowRoot) ? child.childNodes.length : child.shadowRoot.childNodes.length;

eruda/src/Elements/Elements.js Line 291

// From
ret.children = formatChildNodes(el.childNodes)
// To
ret.children = formatChildNodes((!el.shadowRoot) ? el.childNodes : el.shadowRoot.childNodes);

[uplusion23]

I haven't gotten too much into Eruda's structure, or how it builds the UI elements, but the areas I see that catch my attention are
Line 115 in Eruda-DOM/index.js, and Line 291 in Eruda/Elements.js.

The code can be adjusted as follows;

eruda-dom/src/index.js Line 115

// From
const childCount = child.childNodes.length;
// To
const childCount = (!child.shadowRoot) ? child.childNodes.length : child.shadowRoot.childNodes.length;

eruda/src/Elements/Elements.js Line 291

// From
ret.children = formatChildNodes(el.childNodes)
// To
ret.children = formatChildNodes((!el.shadowRoot) ? el.childNodes : el.shadowRoot.childNodes);

I've created a pull request with eruda/shadow-dom, view it here

[surunzi]

Use version 3.4.0

[MasterInQuestion]

    Up: https://github.com/liriliri/eruda/commit/ddac0c93533de47d0fc200f8dc3833c3b03bba0f#diff-fbf7686bfc0e147df2628dbfba74a8f468849f638699eff41bd739041cd215fdR312

    Unsure about the exact implementation.
    But my implementation here may worth reference:
    https://github.com/MasterInQuestion/talk/discussions/11#discussioncomment-10726273
    .
    The "rs" function deals with Shadow DOM, reliably.

    Several caveats:
    |1| "shadowRoot" may be recursive.
    |2| Host element of "shadowRoot" may still have other children.

    ----

    Rough test with the coined:
[[

<meta charset="UTF-8" />
<div id="host">
	<pre>Invisible Outer</pre>
<!-- ^ Placed after the adjacent "<template>". (rendered) -->
	<template shadowrootmode="open">
	<span>Shadow DOM</span>

	<div id="host2">
	<template shadowrootmode="open">
	<pre>Visible</pre>
	</template>
	<pre>Invisible Inner</pre>
	</div>
	</template>
</div>

]]
    Seemingly working intended.
    However "eruda-delete-node" on shadow elements seems to cause misbehavior.
    Also "eruda-copy-node" on "#shadow-root (open)".

    Related:
    https://github.com/liriliri/eruda/commit/d92cbe2c587ccbbd9124eac043afdfb2dcf3288a

[tathastu871]

add feature to copy unique selector for elements including shadow