ShadowDOM Visualizer

Oops! Your browser does not support ShadowDOM or <template> natively!
Try Chrome.

This tools allows you to visualize how Shadow DOM renders in the browser.
Both code blocks on the left are editable. Try changing the <content> insertion points, removing, or adding new ones to see how the composited tree is affected. You can also move over the nodes on the right to highlight the relevant markup on the left.