HERRAMIENTAS Y PLATAFORMAS

1. Stencil

   • Stencil es un compilador para generar WebComponents que permite crear componentes reutilizables y compatibles con cualquier framework.
   • Sitio web: stenciljs.com

2. Lit

   • Lit es una biblioteca simple para crear componentes web rápidos, ligeros y reutilizables.
   • Sitio web: lit.dev

3. Svelte

   • Aunque Svelte no es específicamente para WebComponents, puede generar WebComponents como parte de su salida de compilación.
   • Sitio web: svelte.dev

4. Vue

   • Vue.js, a través de su paquete vue-web-component-wrapper, permite exportar componentes Vue como WebComponents.
   • Sitio web: vuejs.org

5. Angular

   • Angular puede crear WebComponents utilizando Angular Elements, lo que permite exportar componentes Angular como WebComponents.
   • Sitio web: angular.io/guide/elements

6. React

   • React puede integrarse con WebComponents, y hay herramientas y bibliotecas que permiten empaquetar componentes React como WebComponents, como el paquete react-web-component.
   • Sitio web: reactjs.org

7. Polymer

   • Polymer es una biblioteca de JavaScript desarrollada por Google que facilita la creación de WebComponents.
   • Sitio web: polymer-project.org

8. Hybrids

   • Hybrids es una biblioteca de JavaScript ligera para crear WebComponents con una API declarativa y simple.
   • Sitio web: hybrids.js.org

9. Bosonic

   • Bosonic es un conjunto de herramientas para desarrollar y empaquetar WebComponents.
   • Sitio web: bosonic.github.io

10. Bit

    • Bit es una plataforma para compartir, gestionar y componer componentes reutilizables, incluidos WebComponents.
    • Sitio web: bit.dev

Estas plataformas y herramientas ofrecen una variedad de enfoques y características para facilitar la creación y el uso de WebComponents que extienden HTMLElement en tus proyectos.

DEFINICIÓN DE UNA CLASE WEBcOMPONENT

class AlexVicente extends HTMLElement {

  constructor() {
    // Siempre es necesario llamar a super() primero para establecer el contexto de 'this'
    super();
    const github = this.getAttribute("github");
    const SIZE = 128;

    // Creamos un shadow DOM (DOM en la sombra) para encapsular el estilo y el contenido del componente
    this.attachShadow({ mode: 'open' });
  }

  // Este método se llama cuando el elemento se añade al DOM
  connectedCallback() {
    // Aquí puedes añadir el HTML y el CSS que quieras que tenga tu componente
    this.shadowRoot.innerHTML = `
      <style>
        /* Estilo para el componente encapsulado en el shadow DOM */
        h1 {
          color: #2c3e50;
          font-family: Arial, sans-serif;
        }
        h2 {
          color: #34495e;
          font-family: Arial, sans-serif;
        }
      </style>
      <div class="card">
        <img src="https://avatars.githubusercontent.com/${github}?size=${SIZE}" alt="${github}">
        <h1>Alex Vicente</h1>
        <h2>Frontend Developer</h2>
      </div>  
    `;
  }

  // Método opcional para reaccionar a cambios de atributos
  // static get observedAttributes() {
  //   return ['some-attribute'];
  // }

  // Método opcional para manejar cambios en los atributos
  // attributeChangedCallback(name, oldValue, newValue) {
  //   if (name === 'some-attribute') {
  //     // Haz algo cuando el atributo cambie
  //   }
  // }

  // Método opcional para limpiar recursos cuando el elemento se remueve del DOM
  // disconnectedCallback() {
  //   // Limpiar eventos o recursos aquí
  // }
}

// Registramos el nuevo elemento personalizado en el CustomElementRegistry
customElements.define('alex-vicente', AlexVicente);

Ejemplo:

<alex-vicente github="alexvijo"></alex-vicente>

Definición de la clase:

class AlexVicente extends HTMLElement {}: Crea una nueva clase AlexVicente que extiende de HTMLElement, lo que permite definir el comportamiento de un nuevo tipo de elemento HTML. Constructor:

constructor() { super(); ... }: El constructor se llama cuando se crea una instancia del componente. super() es necesario para llamar al constructor de HTMLElement. this.attachShadow({ mode: 'open' });: Crea un shadow DOM encapsulado. El mode: 'open' permite acceder al shadow DOM desde JavaScript externo. Método connectedCallback:

connectedCallback() { ... }: Este método se llama automáticamente cuando el elemento se añade al DOM. this.shadowRoot.innerHTML = ...: Define el contenido HTML y CSS que se añadirá al shadow DOM del componente. Esto asegura que los estilos y el contenido del componente estén encapsulados y no afecten al resto del documento. Estilos y contenido:

Los estilos CSS dentro de la etiqueta <style> solo se aplican al contenido del shadow DOM. El contenido HTML define los encabezados h1 y h2 que se mostrarán en el componente.

Registro del componente:

• customElements.define('alex-vicente', AlexVicente);: Registra el nuevo elemento personalizado alex-vicente en el CustomElementRegistry, permitiendo que se use como una etiqueta HTML en el documento.

Opciones adicionales:

Atributos observados:

• static get observedAttributes() { return ['some-attribute']; }: Lista de atributos que el componente observa para cambios.

• attributeChangedCallback(name, oldValue, newValue) { ... }: Método que se llama cuando uno de los atributos observados cambia.

Desconexión del componente:

• disconnectedCallback() { ... }: Método que se llama cuando el elemento se remueve del DOM. Útil para limpiar eventos o liberar recursos.