Shadow DOM Explorer - Interactive Lab | IconVault
Explore open vs closed shadow roots, slots, ::part() and encapsulation with live demos. Free, runs fully in your browser.
Shadow DOM Explorer
Open vs closed shadow, slots, ::part(), encapsulation
Live demo: Open vs Closed
#open-host
#closed-host
What happened
Run the demo to see real DOM results.
Copy-ready code
const openHost = document.querySelector("#open-host");
const openRoot = openHost.attachShadow({ mode: "open" });
openRoot.innerHTML = "<p>Open shadow content</p>";
// Anyone can reach in:
console.log(openHost.shadowRoot === openRoot); // true
const closedHost = document.querySelector("#closed-host");
closedHost.attachShadow({ mode: "closed" });
// Nobody can reach in, not even this script:
console.log(closedHost.shadowRoot); // null
// Keep your own reference if you need it:
// const closedRoot = closedHost.attachShadow({ mode: "closed" });5 of 5 free copies left.
About this tool
IconVault's Shadow DOM Explorer makes web components' hidden machinery visible: attach open and closed shadow roots and see the access difference, project light-DOM content through named and default slots, style through the wall with ::part(), and prove encapsulation by watching page CSS fail to reach inside. It is free to use and runs fully in your browser with nothing uploaded.
How to use: work through the four tabs, run each demo, and read the what-happened log for real DOM results. Perfect for developers learning web components, custom elements and style scoping.
Frequently asked questions
Popular searches
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon