Web Components: hello-message-attribute

hello-message-attribute.js

customElements.define("hello-message", class extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({mode: "open"});
    root.innerHTML = "Hello <slot></slot>";
  }

  static get observedAttributes() {
    return ["name"];
  }

  attributeChangedCallback(name, old, change) {
    this.textContent = change;
  }
});

document.body.innerHTML = "<hello-message name=Jane></hello-message>";