Define custom HTML elements with JavaScript and CSS

by Alex Phillips

JavaScript

class Outer extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <inner-element></inner-element>
      <inner-element></inner-element>
      <inner-element></inner-element>
      <inner-element></inner-element>
    `;
  }
}

class Inner extends HTMLElement {
  static index = 0;

  constructor() {
    super();

    this.index = this.constructor.index++;
    this.innerHTML = `
      <div>
        <h3>Inner Element ${this.index + 1}</h3>
        <slot name="inner-${this.index}"></slot>
      </div>  
    `;
  }
}

customElements.define('outer-element', Outer);
customElements.define('inner-element', Inner);

document.body.innerHTML = `<outer-element>
  <div slot="inner-0">Inner element content 0</div>
  <div slot="inner-1">Inner element content 1</div>
  <div slot="inner-2">Inner element content 2</div>
  <div slot="inner-3">Inner element content 3</div>
</outer-element>`;