Capture the component host normally; SnapDOM walks open shadow roots during cloning.
Copy-paste example
Install @zumer/snapdom, select the rendered element, and capture it:
const component = document.querySelector('user-profile-card')
const image = await snapdom.toPng(component, { embedFonts: true })
document.body.appendChild(image)Why this pattern works
No special selector or manual shadow-root cloning is required for open roots. SnapDOM flattens the rendered component into the capture while preserving resolved styles.
Capture a real Shadow DOM component
The colored card below is rendered inside an open shadow root, not in the light DOM.
Limits and common mistakes
Closed shadow roots are intentionally inaccessible to page JavaScript and cannot be traversed. External assets remain subject to browser security rules.
Frequently asked questions
Can SnapDOM capture closed Shadow DOM?
No. Closed roots are not accessible through the DOM API.
Does this work with Lit?
Yes. Lit commonly renders into open shadow roots; capture the host after its update is complete.
Capture it in the browser
Install SnapDOM and turn the DOM your users already see into a portable image.
Open the demoInstall from npm