Зависимость между двумя пользовательскими элементами и путями подачи Polymer - PullRequest
Новая
       34

Зависимость между двумя пользовательскими элементами и путями подачи Polymer

1 голос
/ 11 марта 2019

Я создал 2 пользовательских элемента (назовем их element-a и element-b) с полимером 3.0.

Каждый из них по отдельности работает нормально, когда я запускаю "Обслуживание полимера" из / my / path / to / element-a, а затем использую браузер для доступа к URL-адресу "http://127.0.0.1:8081/components/element-a/demo/" ... то же самое, если я запускаю "полимерная подача" из / my / path / to / element-b, затем доступ "http://127.0.0.1:8081/components/element-b/demo/"

Теперь я хочу, чтобы "элемент-b" мог в некоторых случаях создавать "элемент-а". Это может звучать легко, но пока я не смог этого сделать.

Во-первых, я обнаружил, что единственный способ одновременно обслуживать оба элемента - запустить «полимерную подачу» из / my / path / to. Затем я получаю доступ к своим элементам в "http://127.0.0.1:8081/components/polymer/element-a/demo/" или" http://127.0.0.1:8081/components/polymer/element-b/demo/".. Это работает, но я не уверен, что это правильный способ сделать это (?)

Затем в element-b.js я попытался добавить импорт в element-a следующим образом: 

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '../element-a/element-a.js';

class ElementB extends PolymerElement {
 ...
}

window.customElements.define('element-b', ElementB);

element-a.js остается без изменений: 

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';

class ElementA extends PolymerElement {
 ...
}

window.customElements.define('element-a', ElementA);

К сожалению, это не работает: element-b больше не отображается, вместо этого я получаю ошибки javascript в консоли:

с Firefox:

NotSupportedError: Операция не поддерживается dom-module.js: 182

с хромом:

Uncaught DOMException: не удалось выполнить 'define' для 'CustomElementRegistry': это имя уже использовалось с этим реестром в http://127.0.0.1:8081/components/polymer/element-a/node_modules/@polymer/polymer/lib/elements/dom-module.js:175:16

Я очень озадачен тем, как использовать полимер-подачу, я не понимаю, как переписываются пути, подобные тем, что включены в оператор include, и я не могу найти подробную документацию об этих вещах, кроме вводных руководств ...

Любая помощь, объяснения или полезные ссылки будут с благодарностью! Спасибо,

Эрве

1 Ответ

1 голос
/ 11 марта 2019

Попробуйте это

In component A

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';

class ElementA extends PolymerElement {
 static get template{
    return html `<p>This is sample test</p>`
 }
}

window.customElements.define('element-a', ElementA);

In component-b

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import './element-a.js';

class ElementB extends PolymerElement {
  static get template{
    return html `<element-a></element-b>`
  }
}

window.customElements.define('element-b', ElementB);
...