component.js

// STEP 1 - DEFINING TEMPLATE STRUCTURE AND STYLES

// creating the template
const template = document.createElement('template');

// styles and HTML templating structure goes right here
template.innerHTML = `
<style>

  .wrapper {
    font-size: 2rem;
  }
	
  .heart {
    fill: red;
    position: relative;
    top: 5px;
    width: 30px;
    animation: pulse 1s ease infinite;
  }

  @keyframes pulse {
    0% { 
      transform: scale(1); 
    }
    50% { 
      transform: scale(1.3); 
    }
    100% { 
      transform: scale(1); 
    }
  }

</style>

<div class='wrapper'>
  <span>Spread the</span>
  <svg class="heart" viewBox="0 0 32 29.6">
    <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
    c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
  </svg>
  <span>for web components</span>
</div>

`;

// 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 create a template which is going to be attached to the shadowRoot
    shadow.appendChild(template.content.cloneNode(true));
  }
}

// STEP 3 - REGISTER THE NEW COMPONENT AS A CUSTOM HTML TAG
window.customElements.define('awesome-component', AwesomeComponent);