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>
`
;
}
}

In contrast to many other component libraries Wafer templates do not offer a way to attach property updates or event binding through the template. Instead this is achieved through the use of CSS selectors with targets to update the DOM, and events to attach event handlers.

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>
`
;
}
}
Next: Properties Previous: Overview