webComponentStepTwo.js

// STEP 2 - DEFININING COMPONENT BEHAVIOUR

class AwesomeComponent extends HTMLElement {
  constructor() {
    super();
    // enables to access the shadowDom through the shadowRoot
    const shadow = this.attachShadow({ mode: 'open' });
    // we are going to attach the template to the shadowRoot ( || shadowDOM)
    shadow.appendChild(template.content.cloneNode(true));
  }
}