What JS frameworks do

<User username="desatranques">

<span class="user">
  <img class="user__avatar"
   src="desatranques.png">
   Desatranques Jaén
</span>

customElements.define(
  'x-user',
  class extends HTMLElement {
    constructor() {
      super();
      // ...
    }
  }
);

<x-user>

JS framework vs Web Component

JS framework:

<span class="user">
  <img class="user__avatar"
   src="desatranques.png">
  Desatranques Jaén
</span>

Web Components:

<x-user>
  #shadow-root
    <span class="user">
      <img class="user__avatar"
       src="desatranques.png">
      Desatranques Jaén
    </span>
</x-user>

customElements.define(
  'x-user',
  class extends HTMLElement {
    constructor() {
      super();

      this.attachShadow({ mode: 'open' });
      this.shadowRoot.innerHTML =
        '<span class="user">...</span>';
    }
  }
);

<template id="user-tpl">
  <style>
    .user { border: 1px solid black; }
  </style>
  <span class="user">
    <img src="avatar.png">Anonymous
  </span>
</template>

const template = document.querySelector('#user-tpl'); 

this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(
  template.content.cloneNode(true));

<slot>

Allows the user of a component to inject DOM inside.
Multiple slots are allowed for a component
Ej:

<x-message level=“success”> <p>Once upon a time…</p> </x-message>

// which attributes to watch
static get observedAttributes() {
  return ['username'];
}

// callback for changes
attributeChangedCallback(attr, oldValue, value) { 
  // re-render component here
  // …
}