CODEWITHSUNDEEP
javascriptpolymerpolymer-3.x
Piotr Treska
Piotr Treska

Reputation: 71

How to include custom polymer element inside another

How to include custom polymer 3 element inside another? Let's say I have two components:

1) Parent-component 2) Child-component

I would like to include and use child component inside parent component. The question is: where should I put my child element and how to configure import path?

Upvotes: 0

Views: 574

Answers (1)

Diego P
Diego P

Reputation: 1758

In your parent element add the import declaration of the child element:

import './child-element.js';

Then, add a reference of the imported element in the parent's template:

<child-element></child-element>

Your child element could be like:

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);

Upvotes: 1

Related Questions