Introducción a componentes Web

introduccion-a-componentes-web.markdown

Introducción a componentes Web

A Pen by Joel Alejandro Villarreal Bertoldi on CodePen.

License.

script.js

// Esta función utilitaria nos permite cargar el contenido de <template>
// para cualquier componente.
function cargarTemplate(referenciaTemplate, instanciaComponente) {
  const template = document.querySelector(referenciaTemplate);
  const templateContent = template.content;
  instanciaComponente.attachShadow({ mode: "open" })
    .appendChild(templateContent.cloneNode(true));
}

/* Definición del componente */
class TabifitLogo extends HTMLElement {
  constructor() {
    super();
    cargarTemplate("#tabifit-logo", this);
  }
}

/* Registro del componente */
customElements.define("tabifit-logo", TabifitLogo);

class TabifitTitle extends HTMLElement {
  constructor() {
    super();
    cargarTemplate("#tabifit-title", this);
  }
}

customElements.define("tabifit-title", TabifitTitle);

style.css

/* Podemos estilizar nuestros componentes como si fueran etiquetas HTML! */
tabifit-logo {
  display: block;
  margin: 0 auto;
  width: 300px;
}

web-components.html

<!--
Paso 1: Nombrar nuestro componente, con algún prefijo, un guión medio
y el nombre del componente en sí mismo. Ejemplo: para el componente
de logo de nuestra aplicación, crearemos "tabifit-logo".
-->
<tabifit-logo></tabifit-logo>
<tabifit-title>Series</tabifit-title>
<tabifit-title>Vueltas</tabifit-title>

<!--
Paso 2: Creamos una etiqueta <template> cuyo ID sea igual al nombre del
componente.
-->
<template id="tabifit-logo">
  <!--
  Paso 3: Escribo los estilos del componente dentro de <template>,
  usando una etiqueta <style>
  -->
  <style>
    /* Estilos del componente */
    img {
      border: 2px solid red;
    }
  </style>
  
  <!-- Paso 4: Escribimos lo que queremos mostrar en el componente,
  es decir, el HTML puro -->
  <img src="https://placehold.it/300x300">
</template>

<template id="tabifit-title">
  <style>
    h1 {
      color: blue;
    }
  </style>
  <h1>
    <!-- Acá va el contenido que se puso en la etiqueta afuera -->
    <slot />
    <!-- SLOT se reemplaza con lo que le pasemos al componente por dentro -->
    <img src="https://placehold.it/48x48">
  </h1>
</template>