Итак, я хочу включить несколько несвязанных веб-компонентов в одну HTML-страницу, и мы пытаемся сделать это с помощью Polymer.
Каждый отдельный веб-компонент работает нормально, но объединение нескольких из них вызывает многоголовная боль.
Что я сделал, чтобы показать проблему:
- создайте два веб-компонента с помощью полимера init и выберите
polymer-3-element - , чтобы убедиться, что они имеют разные имена
window.customElements.define('test-element-a', TestElement);
window.customElements.define('test-element-b', TestElement);
Теперь я хочу собрать и связать их (так как мои компоненты имеют некоторые зависимости) в файл 1 js ... и вот где я застрял.Я попытался использовать следующий Polymer.json:
{
"entrypoint": "index.html",
"shell": "test-element.js",
"npm": true,
"lint": {
"rules": [
"polymer-3"
]
},
"builds": [
{
"name": "es6prod",
"preset": "es6-bundled",
"addServiceWorker": false,
"bundle": {
"inlineCss": true,
"inlineScripts": false,
"rewriteUrlsInTemplates": true,
"sourcemaps": true,
"stripComments": true
}
}
]
}
Итак, теперь я создал простую веб-страницу, куда я хотел бы включить их:
<html>
<head><script>/*a whole lot of javascript so the define function is available*/</script>
</head>
<body>
<h1>Testing multiple polymer components</h1>
<test-element-a></test-element-a>
<test-element-b></test-element-b>
<script type="module" src="./polymer-element-a/build/es6prod/test-element.js"></script>
<script type="module" src="./polymer-element-b/build/es6prod/test-element.js"></script>
</body>
</html>
И вот у меня проблемачто только первый веб-компонент загружается ... для второго, в консоли доступна ошибка:
(index):2 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
at http://127.0.0.1:8081/polymer-element-b/build/es6prod/test-element.js:1:4222
at f (http://127.0.0.1:8081/:2:10783)
at http://127.0.0.1:8081/:2:10676
at h (http://127.0.0.1:8081/:2:11004)
at e (http://127.0.0.1:8081/:2:10639)
at http://127.0.0.1:8081/:2:12620
at j (http://127.0.0.1:8081/:2:11604)
at http://127.0.0.1:8081/:2:12602
Если я копаю глубже, это происходит потому, что дважды происходит следующее: customElements.define("dom-module",DomModule), один раз для каждогоcomponent.
Итак, мой вопрос: как создать полимерные веб-компоненты, чтобы мы могли сделать их многоразовыми?