demo · v146

Nested shadow isolation

Two third-party widgets each ship a custom element called <widget-button> with completely different rendering and behaviour. With the legacy global registry only the first one wins. With Chrome 146's scoped registries each widget's shadow root binds the name to its own definition. Toggle between the two strategies and watch the second widget either crash or render correctly.

Feature-detect: the page tests ShadowRoot.prototype.customElements and the registry option on attachShadow. If they're missing, the demo falls back to a simulated outcome so you still see the difference.

strategy

Pick a strategy to render.

vendor A — <widget-button> (purple, alerts on click)

vendor B — <widget-button> (emerald, dispatches "purchase")

registration log

// Vendor A:
const regA = new CustomElementRegistry();
regA.define("widget-button", class WAA extends HTMLElement { /* purple */ });
const hostA = document.querySelector("#a").attachShadow({ mode: "open", registry: regA });

// Vendor B:
const regB = new CustomElementRegistry();
regB.define("widget-button", class WAB extends HTMLElement { /* emerald */ });
const hostB = document.querySelector("#b").attachShadow({ mode: "open", registry: regB });
// Each registry resolves <widget-button> to its own class.

see also