Shadow DOM innerHTML

[GioValentin]

REF: w3c/DOM-Parsing#73

There needs to be a way to read the contents of a shadow DOM regardless if it's closed or open when we're not the creator. The function getInnerHTML({includeShadowRoots: true}) works if the shadow root use the template syntax but if a shadow root is generated using a generic implementation like my example below then you can't get the contents of the html of the shadow root.

An example,

var _div = document.createElement('div');
var root = _div.attachShadow({mode: 'open'}); // or closed
var helloWorld = document.createElement('div');
helloWorld.innerHTML = '

Hello World

';
root.appendChild(helloWorld);

I would like to be able to call the element and generate a string by doing element.shadowRoot.innerHTML. This works when we are the creator but it does not work when we're not.

[dylanb]

How would you even know that you had to call that function on a closed shadow root element?

[GioValentin]

Using a mutate observer on the document. @dylanb

[o0101]

@GioValentin

Well you can do it with the backend 😄 : DOMSnapshot.captureSnapshot

But I suppose you want a regular web API and not something in the remote debugging protocol 😄

[annevk]

I'm not sure I understand, getInnerHTML() should always work, regardless of how it was created.

And yeah, I don't see how this would work for closed trees if they are hidden from you.

[dylanb]

I think it would be a good idea to have a DOM function that returns a list of all the elements that have shadow trees (open or closed). This would be useful in multiple contexts, including allowing tools that inspect/audit HTML (like axe-core) to be able to flag things it cannot inspect/audit accurately.

[annevk]

I'm not sure I understand. That would directly go against encapsulation.

I'm inclined to close this issue as nobody clarified things after my prior comment.

[bathos]

returns a list of all the elements that have shadow trees (open or closed)

Tooling that exposes information about closed shadow trees needs to stay in the tooling layer, not the runtime.

[lucgagan]

How do I convert the output of captureSnapshot to HTML?