Как включить пользовательский полимерный элемент внутри другого

Question

Как включить пользовательский полимерный элемент 3 внутри другого? Допустим, у меня есть два компонента:

1) родительский компонент 2) Детский компонент

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

Answer 1

В родительском элементе добавьте объявление импорта дочернего элемента:

import './child-element.js';

Затем добавьте ссылку на импортируемый элемент в шаблоне родителя:

<child-element></child-element>

Ваш дочерний элемент может выглядеть так:

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

class ChildElement extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
        }
      </style>
      <div>This is you child element</div>
    `;
  }
}

window.customElements.define('child-element', ChildElement);