<!-- our custom element tag, with an initial attribute value -->

<my-element nickname="Ada"></my-element>

​

<!-- a button to show a message from our element -->

<p><button id="show-message">Show message</button><p>

​

<!-- some forms to change our element's attribute or property -->

<form id="change-attr">

  <input name="newname" type="text" placeholder="New name">

  <button>Change by attribute</button>

</form>

<form id="change-prop">

  <input name="newname" type="text" placeholder="New name">

  <button>Change by property</button>

</form>

​

<!-- the template for our custom element -->

<template id="my-template">

  <h1>My First Custom Element</h1>

  <h2 id="nickname"></h2>

</template>

​

<script>

class MyElement extends HTMLElement {

  /*

    The setter and getter methods for our element's properties

  */

  set nickname(val) {

    /*

      when our property is changed, reflect the change to an

      attribute with the same name.

    */

    this.setAttribute('nickname', val);

  }

  get nickname() {

    /*

      since we are reflecting this property to an attribute with

      the same name, that's where we'll retrieve the value from

    */

    return this.getAttribute('nickname');

  }

  /*

    Another element property, this time a function

  */

  showMessage() {

    alert('Hi ' + this.nickname);

  }

​

  /*

    define which attributes will be watched for changes

  */

  static get observedAttributes() {

    return ['nickname'];

  }

​

  constructor() {

    super();

​

    /*

      stamp out our template as before and add it to the element's DOM

    */

    const template = document.getElementById('my-template');

    const instance = template.content.cloneNode(true);

    this.appendChild(instance);

  }

​

  attributeChangedCallback(name, oldValue, newValue) {

    /*

      when our attrribute changes, let's update our content too

    */

    this.querySelector('#nickname').textContent = newValue;

  }

}

​

/*

  officially announce are new element to thr browser

*/

customElements.define('my-element', MyElement);

​

const myelement = document.querySelector('my-element');

const messageButton = document.querySelector('#show-message');

​

messageButton.addEventListener('click', () => {

   myelement.showMessage();

});

​

const formAttr = document.querySelector('#change-attr');

formAttr.addEventListener('submit', (event) => {

  event.preventDefault();

​

  myelement.setAttribute('nickname', event.target.newname.value);

});

​

const formProp = document.querySelector('#change-prop');

formProp.addEventListener('submit', (event) => {

  event.preventDefault();

​

  myelement.nickname = event.target.newname.value;

});

</script>