Custom Element Lifecycle

Custom elements come with a set of lifecycle hooks. In this section you'll use two of them:

constructor
connectedCallback

The constructor is called when the element is first created: for example, by calling document.createElement(‘rating-element') or new RatingElement(). The constructor is a good place to set up your element.

It's bad practice to do DOM manipulation in the constructor.

This is because DOM manipulations can slow down initial load times, and cause some problems in some edge cases.

The connectedCallback is called when the custom element is attached to the DOM. This is typically where initial DOM manipulations happen.

Render DOM

Permalink to "Render DOM"

Now, return to the custom element and associate some DOM with it. Set the element's content when it gets attached to the DOM:

export class RatingElement extends HTMLElement {
  rating: number;

  constructor() {
    super();
    this.rating = 0;
  }

  connectedCallback() {
    this.innerHTML = `
      <style>
        rating-element {
          display: inline-flex;
          align-items: center;
        }
        rating-element button {
          background: transparent;
          border: none;
          cursor: pointer;
        }
      </style>
      <button class="thumb_down" >
        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
      </button>
      <span class="rating">${this.rating}</span>
      <button class="thumb_up">
        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
      </button>
    `;
  }
 }

 customElements.define('rating-element', RatingElement);

export class RatingElement extends HTMLElement {
  constructor() {
    super();
    this.rating = 0;
  }

  connectedCallback() {
    this.innerHTML = `
      <style>
        rating-element {
          display: inline-flex;
          align-items: center;
        }
        rating-element button {
          background: transparent;
          border: none;
          cursor: pointer;
        }
      </style>
      <button class="thumb_down" >
        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
      </button>
      <span class="rating">${this.rating}</span>
      <button class="thumb_up">
        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
      </button>
    `;
  }
 }

 customElements.define('rating-element', RatingElement);

In the constructor, you store an instance property called rating on the element. In the connectedCallback, you add DOM children to <rating-element> to display the current rating, together with thumbs up and thumbs down buttons.

This example is not following accessibility best practices for controls and inputs.