Polymer: Multiple Polymer 3.x elements on an HTML page

Created on 16 Apr 2018 · 7Comments · Source: Polymer/polymer

Description

We're experimenting with creating web components using Polymer 3. We have multiple repositories creating and packaging components. They work fine in isolation, but when we try to use them on the same page, we get an error:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry

I traced this to each component trying to register dom-element without first checking if a dom-element is already defined..

What I’m trying to accomplish to is actually create my own, encapsulated components. For example, in one repo, I create Foo extends PolymerElement and in another i create Bar extends PolymerElement. I build each one such that I have foo-bundle.js and bar-bundle.js. Now, on a plain old HTML page:

<body>
    <script type="module" src="/public/components/foo-bundle.js" />
    <script type="module" src="/public/components/bar-bundle.js" />

    <foo />
    <bar />
</body>

If I hack node_modules/\@polymer/polymer/lib/elements/dom-module.js such that:

if (!customElements.get('dom-module')) {
    customElements.define('dom-module', DomModule);
}

The problem disappears. This seems to be the main conflict on the global scope.

Live Demo

https://codepen.io/foo4u/full/YamBYz

Full source

Steps to Reproduce

Create and compile 2 elements
Consume both elements on an HTML page / Pug view, etc

Expected Results

No error is thrown, all elements display on page.

Actual Results

Error is thrown: Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry.

Browsers Affected

All

Versions

Polymer: v3.0.0-pre.12
webcomponents: v1.0.0

Source

foo4u

Most helpful comment

I think you are bundling Polymer twice. Once in foo-bundle and once in bar-bundle. Make sure that you are loading Polymer only once, even across multiple bundles. To do so, do not import the singular bundles for each component, but instead on the application level create these bundles. In this case, your common dependencies (like Polymer) must live in a shared-bundle.

TimvdLippe on 16 Apr 2018

👍2

All 7 comments

TimvdLippe on 16 Apr 2018

👍2

Closing per above comment. Feel free to reopen if you still run into issues after creating a shared bundle.

TimvdLippe on 22 Apr 2018

@TimvdLippe @foo4u
I am stuck on the same issue. Do you by any chance have an example or useful link on how to create this shared-bundle? I do not find any tutorials/documentation/... about this matter.

I created 2 separate polymer-3-elements, which build just fine (including polymer), with the polymer cli. As is the case with foo4u, both elements need to work on the same page/application.

Laurensvdw on 1 Aug 2018

@Laurensvdw If 2 elements both use Polymer, do not bundle these elements separately, but together. E.g. Polymer should NOT be bundled with each element, but with the application. This is the default strategy of the Polymer CLI: https://www.polymer-project.org/3.0/docs/tools/create-app-polymer-cli#dependencies

E.g., you load Polymer separately from the dependency that loads it (in this case paper-button and my-el). Each element only has its own source and does NOT include Polymer. Then when you bundle using the CLI, it will contain 1 x Polymer, 1 x paper-button and 1 x my-el.

TimvdLippe on 1 Aug 2018

🎉1

@TimvdLippe Now it is all clear to me, I know I was missing an essential piece to the Polymer puzzle. I was creating a Polymer Element for each new element, as a standalone Polymer build etc. I was not aware that I had to create a Polymer application, my understanding was that all elements would be bound to the application itself, where in reality they all get spit out individually during the build process.

Thank you for your fast and clear response! :)

Laurensvdw on 2 Aug 2018

@Laurensvdw you can consider using Webpack for building the Polymer 3 application, here is an example of how to use it: https://github.com/web-padawan/polymer3-webpack-starter

web-padawan on 2 Aug 2018

@web-padawan Thanks for sharing. Currently the requirement is to use web components as they need to be used in different environments (Angular, .net MVC,...). Your project is without a doubt essential for the community to create applications.
But would you also advise to use it instead of the polymer cli, for my purpose to spit out individual components with a shared polymer bundle?
I have the feeling by adding webpack, typescript,... it creates additional layers which make it more like an overkill for "simple" components. :/

Laurensvdw on 2 Aug 2018

Was this page helpful?

0 / 5 - 0 ratings