{"id":10479,"date":"2026-07-30T09:43:28","date_gmt":"2026-07-30T14:43:28","guid":{"rendered":"https:\/\/master.dev\/blog\/?p=10479"},"modified":"2026-07-30T09:43:29","modified_gmt":"2026-07-30T14:43:29","slug":"same-name-different-component-with-scoped-custom-element-registries","status":"publish","type":"post","link":"https:\/\/master.dev\/blog\/same-name-different-component-with-scoped-custom-element-registries\/","title":{"rendered":"Same Name; Different Component with Scoped Custom Element Registries"},"content":{"rendered":"\n

Chrome 146<\/a> recently introduced scoped custom element registry<\/a>, which is a way to introduce custom elements in your app without using the global registry namespace. This makes it possible for different versions or entirely different custom elements to share the same tag name. Firefox 150<\/a> also has this feature locked behind a feature flag, so it\u2019s likely to be one of the features listed in Baseline 2026<\/a>.<\/p>\n\n\n\n

In this article, I\u2019m going to share one or two examples of components that “ought to have the same tag name”<\/em>. <\/p>\n\n\n\n

The Basics<\/h2>\n\n\n\n

You’ve got a custom element button. It’s from your design system, hence the “ds” naming:<\/p>\n\n\n

<ds-button<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Great. But maybe you’re also<\/em> using another<\/em> set of custom components, and it’s also<\/em> got a <ds-button><\/code>. Or, perhaps more likely, it’s your own set of custom elements, but you’ve versioned them, and you need to use v1 and v2 on the same page.<\/p>\n\n\n
<body<\/span>><\/span>\n    <main<\/span>><\/span>\n      <!-- v1 usage up here --><\/span>\n      <ds-button<\/span>><\/span>Button<\/ds-button<\/span>><\/span>\n    <\/main<\/span>><\/span>\n\n    <footer<\/span>><\/span>\n      <!-- v2 usage down here, shadow DOM --><\/span>\n    <\/footer<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
So maybe our default registry is v1, and we get ready by having a custom registry where we’re gonna put v2 stuff.<\/p>\n\n\n
customElements.define(\"ds-button\"<\/span>, v1Button);\n\nconst<\/span> footerRegistry = new<\/span> CustomElementRegistry();\nfooterRegistry.define(\"ds-button\"<\/span>, v2Button);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Then one<\/em> way to use the custom registry is to tell the Shadow DOM we put there to use it. This isn’t required as we’ll see later, but it’s one way.<\/p>\n\n\n
const<\/span> footer = document<\/span>.querySelector(\"footer\"<\/span>);\nconst<\/span> shadow = footer.attachShadow({\n  mode<\/span>: \"open\"<\/span>,\n  customElementRegistry<\/span>: footerRegistry\n});\n\nshadow.innerHTML = `\n  <ds-button>Will be v2Button!<\/ds-button>\n`<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n