--- title: Same Name; Different Component with Scoped Custom... description: Chrome 146 introduced scoped custom element registries, allowing multiple versions of a custom element to share the same tag name without conflicts in the... canonical: https://daily.dev/posts/same-name-different-component-with-scoped-custom-element-registries-master-dev-blog-bh2mr9oyh twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Same Name; Different Component with Scoped Custom Element Registries – Master.dev Blog | daily.dev og:description: Chrome 146 introduced scoped custom element registries, allowing multiple versions of a custom element to share the same tag name without conflicts in the... og:url: https://daily.dev/posts/same-name-different-component-with-scoped-custom-element-registries-master-dev-blog-bh2mr9oyh og:image: https://api.daily.dev/og/posts/Bh2mR9oyh.png og:image:alt: Same Name; Different Component with Scoped Custom Element Registries – Master.dev Blog og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Same Name; Different Component with Scoped Custom Element Registries – Master.dev Blog **[Frontend Masters](https://daily.dev/sources/frontendmasters)** · 11 min read · 1 upvotes · 0 comments ## Summary Chrome 146 introduced scoped custom element registries, allowing multiple versions of a custom element to share the same tag name without conflicts in the global registry. The feature works by creating a new CustomElementRegistry instance and associating it with a Shadow DOM or individual elements via the initialize() method. The post walks through two demos — versioned Material Design buttons and macOS-style context menus — to illustrate practical use cases. It also covers TypeScript type declarations needed before TypeScript 6, browser support status (Chrome 146, Firefox 150 behind a flag, Safari 26), and the author's wish for a declarative HTML attribute syntax to scope registries without requiring Shadow DOM. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What does the scoped custom element registry feature added in Chrome 146 actually do? It lets developers register custom elements outside the single global customElements registry, so different versions or entirely different components can share the same tag name on one page. A new CustomElementRegistry instance is created and defined separately, then applied to a shadow root via attachShadow's customElementRegistry option or to an element via document.createElement, avoiding tag name collisions across component versions or libraries. _daily.dev surfaces web platform changes like this for developers tracking new browser capabilities before adopting them._ ### Which browsers support the scoped custom element registry API and the CustomElementRegistry initialize method? Chrome 146 shipped it, Safari added support and was reportedly the first major browser to implement the underlying standard, and Firefox 150 has it available behind a feature flag. Because Safari implemented it early despite generally being conservative about new web standards, it is considered a strong candidate to be included in an upcoming Baseline release. _developers weighing browser support before shipping a web feature check compatibility milestones like this on daily.dev._ ### Do I still need custom TypeScript type declarations for CustomElementRegistry and customElementRegistry properties? No, this is no longer necessary starting with TypeScript 6.0 or later, or if a project does not use TypeScript at all. Earlier code written before TypeScript 6.0 required manually declaring global interfaces for CustomElementRegistry.initialize, ElementCreationOptions.customElementRegistry, and the customElementRegistry property on Document, HTMLElement, and ShadowRoot. _teams upgrading TypeScript versions can track which manual type workarounds become unnecessary via daily.dev._ ## Similar posts on daily.dev - [Make custom elements behave with scoped registries](https://daily.dev/posts/make-custom-elements-behave-with-scoped-registries-kzugmujaq) · Chrome Developers · 23 upvotes · 1 comments - [Chrome for Developers](https://daily.dev/posts/chrome-for-developers-8ir9x3upz) · Chrome Developers · 109 upvotes · 6 comments - [New Things You Should Know About HTML Here in Mid 2026 – Master.dev Blog](https://daily.dev/posts/new-things-you-should-know-about-html-here-in-mid-2026-master-dev-blog-exp0rgmog) · Frontend Masters · 10 upvotes · 0 comments - [Chris’ Corner: Web Components](https://daily.dev/posts/chris-corner-web-components-jpdf2t1kg) · CodePen · 1 upvotes · 0 comments - [How To Dynamically Install Custom Elements](https://daily.dev/posts/how-to-dynamically-install-custom-elements-lsfclxwad) · HeydonWorks · 5 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#html](https://daily.dev/tags/html), [#design-systems](https://daily.dev/tags/design-systems), [#web-components](https://daily.dev/tags/web-components) [View this post on daily.dev](https://daily.dev/posts/same-name-different-component-with-scoped-custom-element-registries-master-dev-blog-bh2mr9oyh) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Same Name; Different Component with Scoped Custom Element Registries – Master.dev Blog","url":"https://daily.dev/posts/same-name-different-component-with-scoped-custom-element-registries-master-dev-blog-bh2mr9oyh","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/same-name-different-component-with-scoped-custom-element-registries-master-dev-blog-bh2mr9oyh"},"datePublished":"2026-07-30T14:43:59.952Z","dateModified":"2026-09-14T06:15:13.095Z","description":"Chrome 146 introduced scoped custom element registries, allowing multiple versions of a custom element to share the same tag name without conflicts in the...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a2f10866fdf008c3f233e5d7fc0d1ecd?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a2f10866fdf008c3f233e5d7fc0d1ecd?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Frontend Masters","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Frontend Masters","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/d34dd87208f24090bfb0917307fcf89f","url":"https://daily.dev/sources/frontendmasters"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/same-name-different-component-with-scoped-custom-element-registries-master-dev-blog-bh2mr9oyh","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,javascript,html,design-systems,web-components","timeRequired":"PT11M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Frontend Masters","item":"https://daily.dev/sources/frontendmasters"},{"@type":"ListItem","position":3,"name":"Same Name; Different Component with Scoped Custom Element Registries – Master.dev Blog"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/same-name-different-component-with-scoped-custom-element-registries-master-dev-blog-bh2mr9oyh#faq","mainEntity":[{"@type":"Question","name":"What does the scoped custom element registry feature added in Chrome 146 actually do?","acceptedAnswer":{"@type":"Answer","text":"It lets developers register custom elements outside the single global customElements registry, so different versions or entirely different components can share the same tag name on one page. A new CustomElementRegistry instance is created and defined separately, then applied to a shadow root via attachShadow's customElementRegistry option or to an element via document.createElement, avoiding tag name collisions across component versions or libraries. daily.dev surfaces web platform changes like this for developers tracking new browser capabilities before adopting them."}},{"@type":"Question","name":"Which browsers support the scoped custom element registry API and the CustomElementRegistry initialize method?","acceptedAnswer":{"@type":"Answer","text":"Chrome 146 shipped it, Safari added support and was reportedly the first major browser to implement the underlying standard, and Firefox 150 has it available behind a feature flag. Because Safari implemented it early despite generally being conservative about new web standards, it is considered a strong candidate to be included in an upcoming Baseline release. developers weighing browser support before shipping a web feature check compatibility milestones like this on daily.dev."}},{"@type":"Question","name":"Do I still need custom TypeScript type declarations for CustomElementRegistry and customElementRegistry properties?","acceptedAnswer":{"@type":"Answer","text":"No, this is no longer necessary starting with TypeScript 6.0 or later, or if a project does not use TypeScript at all. Earlier code written before TypeScript 6.0 required manually declaring global interfaces for CustomElementRegistry.initialize, ElementCreationOptions.customElementRegistry, and the customElementRegistry property on Document, HTMLElement, and ShadowRoot. teams upgrading TypeScript versions can track which manual type workarounds become unnecessary via daily.dev."}}]} ```