prettyDOM should be able to serialize shadowRoots #1188
Comments
|
This library is more of a helper and not a first-class citizen of the API. Could you explain what high-level use cases this change would serve? |
eps1lon
added
enhancement
I'm envisioning printing something like what Playwright has in their documentation for ShadowDOM, which is basically what Chrome Devtools shows as well: https://playwright.dev/docs/selectors#selecting-elements-in-shadow-dom <article>
<div>In the light dom</div>
<div slot='myslot'>In the light dom, but goes into the shadow slot</div>
#shadow-root
<div class='in-the-shadow'>
<span class='content'>
In the shadow dom
#shadow-root
<li id='target'>Deep in the shadow</li>
</span>
</div>
<slot name='myslot'></slot>
</article> |
|
I have a PR to shadow-dom-testing-library that utilizes JSDOM serialization. Unfortunately it doesnt use the "#shadowRoot" conventions since its piping through JSDOM, but heres an example output: <body>
<div>
<duplicate-buttons>
<shadow-root>
<slot
name="start"
/>
<button>
Button One
</button>
<br />
<slot />
<br />
<button>
Button Two
</button>
<slot
name="end"
/>
</shadow-root>
<div
slot="start"
>
Start Slot
</div>
<div>
Default Slot
</div>
<div
slot="end"
>
End Slot
</div>
</duplicate-buttons>
</div>
</body> |
|
I have some kind of version of See it in action here by clicking the |
|
Just updating here, I got a proper serializer working, Thanks @AriPerkkio for the assist. KonnorRogers/shadow-dom-testing-library#43 There is one problem where it seems to output a lot of extra whitespace, but at least its working! |
Splitting this out from #484
A
ShadowRootis a DocumentFragment node that should be able to be serialized by pretty-format & prettyDOM,A few changes would be needed in pretty-dom, including removing or altering the check for outerHTML (shadowRoot has innerHTML only) and adding recursive traversal of the node.
The text was updated successfully, but these errors were encountered: