Serializing DOM as rendered, including Shadow DOM

[michaelcpuckett]

As a web developer, there are times when I may want to get a string representation of the DOM as rendered. For example, I want to copy and paste the rendered DOM into a service that checks for SEO, Microdata, HTML markup validation, accessibility, etc.

With shadow DOM, doing this manually would very difficult, because there is no "rendered" version available -- in JavaScript you would have to manually replace the slot elements.

I think it would be helpful if we had a way to do this natively, either as part of XMLSerializer, or as a DOM property: .renderedInnerHTML or similar.

[rniwa]

Hm... I think we need something like getFlatTree(...shadowRoots) so that only scripts that have access to each ShadowRoot can do such a serialization. Otherwise, we would be violating the encapsulation.

@annevk @smaug----

[annevk]

How would it serialize though? And how is that useful if it cannot be parsed?

[AKRFranko]

I'll add another probable use case:

Lets say I use web components as utilities for laying out data, and then I want to send "what it looks like" via an email. How I used to do this pre-shadow-dom days was I'd inline the styles and then just copy the innerHTML to the email. Now, how would I go about doing that without a way of serializing the dom as rendered?

[michaelcpuckett]

I just read about a new feature -- the declarative Shadow DOM

https://web.dev/declarative-shadow-dom/

element.getInnerHTML({includeShadowRoots: true});

I think that covers this use case?