Templating

Introduction

Wafer templates are defined as a static string in the component definition:

class MyExample extends Wafer {
  // will be attached to an open shadow root
  static get template() {
    return `
      <span id="count"></span>
      <button id="dec">-</button>
      <button id="inc">+</button>
    `;
  }
}

Shadow DOM

By default the DOM created from the template is attached to an open shadow root. If you prefer to use a closed shadow root, pass shadow: 'closed' through the super constructor:

class MyExample extends Wafer {
  constructor() {
    super({ shadow: "closed" });
  }

  // will be attached to a closed shadow root
  static get template() {
    return `
      <span id="count"></span>
      <button id="dec">-</button>
      <button id="inc">+</button>
    `;
  }
}

Light DOM

If you want to use the Light DOM instead, you can pass shadow: false through the constructor's options:

class MyExample extends Wafer {
  constructor() {
    super({ shadow: false });
  }

  // will be attached to the Light DOM
  static get template() {
    return `
      <span id="count"></span>
      <button id="dec">-</button>
      <button id="inc">+</button>
    `;
  }
}