Optional string version of the Shadow DOM template. Defaults to null.

class MyComponent extends Component {
  static get shadow() {
    return `<p>lorem ipsum</p>`;
  }
}

Optional tag name. Defaults to a dasherized version of the class name

class MyComponent extends Component {
  static get tagName() {
    return 'my-alternative-component-tag-name';
  }
}

Optional string version of the innerHTML template. Defaults to null. Return null to disable appendChild on construction.

class MyComponent extends Component {
  static get template() {
    return `<p>lorem ipsum</p>`;
  }
}

Call this static method to define the component as a custom element with the browser.

class MyComponent extends Component {
  …
}

MyComponent.register();
MyComponent.register('#selector');
MyComponent.register(myTemplateNode);

When defining a template, register will look for a <template> element that matches the kabob-case of the component's class name. The shadow DOM can be used instead by adding the data-shadow attribute to the template element.

This will auto-track any attributes listed in observedAttributes.

class MyComponent extends Component {
  static get observedAttributes() {
    return ['foo', 'bar'];
  }
}

Here is a good place to add event listeners to the DOM. Activates tracking and registers this component instance with the renderer. First render is scheduled after this callback.

class MyComponent extends Component {
  connectedCallback() {
    super.connectedCallback();
    this.clickHandler = () => this.doSomething();
    this.shadow.querySelector('button')
      .addEventListener('click', this.clickHandler);
  }
}

Here is a good place to remove event listeners to the DOM. Removes this component instance from the renderer.

class MyComponent extends Component {
  disconnectedCallback() {
    super.disconnectedCallback();
    this.shadow.querySelector('button')
      .removeEventListener('click', this.clickHandler);
  }
}

When this component needs to render this function will be called.

class MyComponent extends Component {
  render() {
    this.shadow.querySelector('.foo').textContent = this.foobar;
  }
}

Activate tracking on this component. Called automatically during .connectedCallback() Use this if you want to assign to a tracked property prior to being appended to the DOM.

let myComponent = document.createElement('my-component').track();
myComponent.foobar = 'This is now tracked';
document.body.appendChild(myComponent);

Called during child components' rendering to ask for any yielded values. This is a method to pass tracked values to other components in it. Most cases this will be a component that has null for the shadow and template but it isn't required. The render() and the yields() are two separate ways to react to tracked changes but they can be used together. Anything returned from this hook will be passed to any child component's render() hook as named argument.

<my-provider>
  <my-presenter></my-presenter>
</my-provider>

class MyProvider extends Component {
  trackedValue = tracked();
  static get shadow() { return null; }
  yields() {
    return { yieldedValue: this.trackedValue };
  }
}
MyProvider.register();

class MyPresenter extends Component {
  render(attrs) {
    let { yieldedValue } = attrs.myProvider;
    this.shadow.textContent = yieldedValue;
  }
}
MyPresenter.register();