Element names are unique, so if you try to register two different implementations of the same element via window.customElements, you'll encounter an error like:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry':
the name "foo-bar" has already been used with this registry

You might hit this error when:

• Multiple components import the redefined component as a dependency and the project's dependency tree has not been deduped.
• Multiple components import out-of-date versions of the redefined component, such that there is no semver-valid version to satisfy all of them.
• A package publishes a pre-built JavaScript blob instead of import-able files, and includes web component dependency definitions in that blob instead of listing them as external.

First, verify that each @spectrum-web-components package in your package.json shares the same version. If @spectrum-web-components/button is on version 0.30.0, then all other SWC packages should also be on version 0.30.0.

Further resolutions are package-manager dependent, but the goal state is the same: a de-duped dependency tree where multiple versions of the same package are hoisted into a single version.

Regardless of package manager, packages that share a dependency with un-resolvable semver ranges are not compatible with one another. The solution is typically for the package maintainers to bump their dependencies to a recent version.

If that isn't possible, package managers provide a way to force version resolutions. However, forcing incompatible versions is likely to cause undefined or breaking behavior in your application:

• npm overrides
• yarn resolutions
• pnpm overrides

Run (p)npm dedupe to collapse multiple definitions of the same component into a single dependency in your tree.

To check for duplication, run npm list @spectrum-web-components/packagenamehere. This will show the branches of the dependency tree that include the conflicting package.

Also, consider setting npm config set prefer-dedupe true for npm to deduplicate packages by default. With this set, npm will dedupe by default, which is convenient for web component development.

Yarn removed its dedupe command, since in theory it dedupes on install. However, this does not seem to always be true.

If you are not able to switch to a package manager that can dedupe dependency trees automatically, then you may have to dedupe manually. With yarn, that involves:

• Running yarn list {packagename} to see which versions are installed
• Adding a commonly-valid version to yarn's resolutions list in package.json.
• Running yarn to reinstall with resolutions.

The Scoped custom element registries proposal is being prototyped in Chrome and discussed in standards groups like the WCCG.

Scoped registries would allow for multiple custom element definitions for a single tag name to coexist within a page. While that will alleviate some pain, it will not be a panacea, because:

• Shipping multiple versions of components will increase page-load size.
• Some components that broadly manage state, or coordinate and orchestrate other components, will still require a single de-duplicated version on the page.

Experimentation with scoped registry polyfills showed unacceptable performance degradation for a large component library.

To support this feature in coming to browsers faster, share your use case with implementors to help increase awareness and priority of this API.