Observed attributes

by Artem

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements -->

<hello-element name="Anita"></hello-element>

JavaScript

class HelloElement extends HTMLElement {
  // Monitor the 'name' attribute for changes.
  static get observedAttributes() {return ['name']; }

  // Respond to attribute changes.
  attributeChangedCallback(attr, oldValue, newValue) {
    if (attr == 'name') {
      this.textContent = `Hello, ${newValue}`;
    }
  }
}

// Define the new element
customElements.define('hello-element', HelloElement);