Hello World Example

For example to create HelloWorld component and use it in your index.html file as follow:

<hello-world who="Unicorn"></hello-world>

You could setup component like shown below:

1. Template file hello-world.html

<h1>Hello<span id="who"></span>!</h1>

2. Javascript file hello-world.js

import { WebComponent } from 'web-component'

@WebComponent('hello-world', {
  template: require('./hello-world.html')
})
export class HelloWorld extends HTMLElement {
  constructor() {
    super();
    this._who = null;
  }

  static get observedAttributes() {
    return ['who'];
  }

  // Only called for the who attributes due to observedAttributes
  attributeChangedCallback(name, oldValue, newValue) {
    this._who = newValue;
    this._updateRendering();
  }

  connectedCallback() {
    if (this.hasAttribute('who')) {
      this._who = this.getAttribute('who');
      this._updateRendering();
    }
  }

  get who() {
    return this._who;
  }

  set who(v) {
    this.setAttribute("who", v);
  }

  _updateRendering() {
    this.shadowRoot.querySelector('#who').textContent = `, ${this._who}`;
  }
}