prefacio

Dado que el autor está aprendiendo sobre micro-frontends recientemente, web componentque también es una de las características principales, se utilizan algunos marcos de micro-frontend, y he estudiado el conocimiento relevante en profundidad y lo he compartido.

¿Qué son los Componentes Web?

Web Component es en realidad una combinación de una serie de tecnologías, que incluye principalmente 3 partes:

Elementos personalizados. Extienda el elemento de la etiqueta personalizada fuera de la etiqueta HTML básica, que es el "componente" del marco que usamos habitualmente;
Sombra DOM. Se utiliza principalmente para aislar el contenido de Shadow DOM del documento externo DOM, que puede entenderse como un subcontenedor en el documento para colocar varios componentes;
Plantillas HTML. Úselo <template>para definir plantillas de componentes, <slot>úselo como ranuras (Vuer no debe ser extraño);

Uno en un archivo html web componentse ve así:

<trace-ele name="webComponent" version="0.0.1" desc="原生态自带隔离的组件">
  <div slot="slot-ele">插槽内容</div>
</trace-ele>

Se parece mucho a Vue, ¿verdad? A continuación, aprendamos las demostraciones una por una web component.

bien

Debido a Web Componentla afinidad nativa, no hay necesidad de depender de otros paquetes index.htmly index.jspuede experimentar el aprendizaje uno por uno.

Escribimos directamente una plantilla html, y los componentes del caso del artículo se denominan colectivamente<trace-ele />

índice.html:

<body>
 <template id="trace">
      <div class="container">
        <img
          class="image"
          src="https://pic1.zhimg.com/50/v2-a6d65e05ec8db74369f3a7c0073a227a_200x0.webp"
          alt=""
        />
        <p class="title">学习Web Component</p>
        <p class="desc">Web Component是微前端沙盒隔离原理的重要知识</p>
        <p class="price">￥25.00</p>
      </div>
    </template>
    <trace-ele />
    <script src="./index.js" />
</body>

Aquí escribimos una "plantilla" templatey declaramos <trace-ele />los componentes a continuación.

Y el principio de realizar todo esto está en index.jsel.

class Trace extends HTMLElement {
    
    
  constructor() {
    
    
    super();
    const templateEle = document.getElementById("trace");
    const cloneEle = templateEle.content.cloneNode(true);
    this.appendChild(cloneEle);
  }
}

customElements.define("trace-ele", Trace);

Web ComponentLa esencia de un componente es que una clase hereda de él HTMLElement. Después de customElements.definedeclarar el componente, el puntero en la clase thisapunta al componente mismo. Los resultados impresos son los siguientes:

Al inicializar, debe proporcionar al componente un caparazón vacío y vincular templatela identificación del elemento para que aparezca el efecto del componente.

¿Se siente Vuesimilar a ver aquí? A continuación, continuemos actualizando las funciones de los componentes ~

vamos a estilizar

Sobre la base de la sección anterior, es muy simple agregar un estilo al componente, index.htmlsimplemente cámbielo y templateagregue style:

<body>
 <template id="trace">
      <div class="container">
        <img
          class="image"
          src="https://pic1.zhimg.com/50/v2-a6d65e05ec8db74369f3a7c0073a227a_200x0.webp"
          alt=""
        />
        <p class="title">学习Web Component</p>
        <p class="desc">Web Component是微前端沙盒隔离原理的重要知识</p>
        <p class="price">￥25.00</p>
      </div>
      
      <style>
        .container {
      
      
          display: inline-flex;
          flex-direction: column;
          border-radius: 6px;
          border: 1px solid silver;
          padding: 16px;
          margin-right: 16px;
        }
        .image {
      
      
          border-radius: 6px;
        }
        .title {
      
      
          font-weight: 500;
          font-size: 16px;
          line-height: 22px;
          color: #222;
          margin-top: 14px;
          margin-bottom: 9px;
        }
        .desc {
      
      
          margin-bottom: 12px;
          line-height: 1;
          font-size: 14px;
        }
        .price {
      
      
          font-size: 14px;
        }
      </style>
    </template>
    <trace-ele />
    <script src="./index.js" />
</body>

Los estilos surten efecto:

Pero aquí si das un estilo de etiqueta general, así:

<body>
    <p>组件外的P标签</p>
        <template>
        <p>组件中的P标签</p>
        <style>
           p {
      
      
             color: red;
           }
            ...
            .container {
      
      }
        </style>
        </template>
</body>

El efecto es el siguiente:

Se puede ver que el exterior del componente p标签también se ve afectado y el color cambia a rojo, pero en el concepto del componente, en realidad solo se espera que este estilo actúe en el componente mismo. Este es también el concepto de aislamiento de estilo y, afortunadamente, Web Componentse proporciona una solución de aislamiento de estilo lista para usar.

Para evitar conflictos <template> entre el <style> CSS interno y el CSS global, podemos colgar el componente en Shadow Root y luego usar Shadow Root para colgarlo en el DOM del documento externo, de modo que se pueda lograr el aislamiento de CSS:

class Trace extends HTMLElement {
    
    
  constructor() {
    
    
    super();
    this.attachShadow({
    
     mode: "open" });
    
    const templateEle = document.getElementById("trace");
    const cloneEle = templateEle.content.cloneNode(true);

    this.shadowRoot.appendChild(cloneEle);
  }
}

customElements.define("trace-ele", Trace);

Observa desde la consola:

Y si hay múltiples componentes, la esencia es que documenthay múltiples en Shadow Root.

El diagrama completo de la arquitectura DOM es el siguiente:

Una de las ventajas de Shadow DOM es que puede aislar la estructura, el estilo y el comportamiento del DOM del Document DOM. Es muy adecuado para la encapsulación de componentes, por lo que puede convertirse en uno de los componentes importantes de Web Component.

Accesorios

VueAl igual que y React, Web Componenttambién proporciona la forma de padre a hijo.

índice.html:

<trace-ele name="webComponent" version="0.0.1" desc="原生态自带隔离的组件">

Aquí se pasan 3 accesorios al componente y se imprimen en el componente thisde la siguiente manera:

Con buen ojo, he encontrado la entrada para aceptar el paso de parámetros en componentes:

Haz una tarea dinámica simple:

class Trace extends HTMLElement {
    
    
  constructor() {
    
    
    super();

    this.attachShadow({
    
     mode: "open" });

    const templateEle = document.getElementById("trace");
    const cloneEle = templateEle.content.cloneNode(true);
    cloneEle.querySelector('.container > .title').textContent = this.getAttribute('name');
    cloneEle.querySelector('.container > .price').textContent = this.getAttribute('version');
    cloneEle.querySelector('.container > .desc').textContent = this.getAttribute('desc');

    this.shadowRoot.appendChild(cloneEle);
  }
}

customElements.define("trace-ele", Trace);

hecho ~

Ranura

Otro beneficio de las plantillas HTML es que se pueden Vue usar como <slot>. Por ejemplo, ahora podemos <trace-ele> agregar una ranura en la parte inferior de esto:

<body>
    <template id="trace">
        <div class="container">
            <p>组件中的P标签</p>
            <img
              class="image"
              src="https://pic1.zhimg.com/50/v2-a6d65e05ec8db74369f3a7c0073a227a_200x0.webp"
              alt=""
            />
            <p class="title">学习Web Component</p>
            <p class="desc">Web Component是微前端沙盒隔离原理的重要知识</p>
            <p class="price">￥25.00</p>
            <slot name="slot-ele"></slot>
        </div>
        <style>
        ...
        </style>
    </template>
    <trace-ele name="webComponent" version="0.0.1" desc="原生态自带隔离的组件">
        <div slot="slot-ele">插槽内容</div>
    </trace-ele>
</body>

De esta manera podemos implementar contenido de tragamonedas personalizado.

vinculación de eventos

Web ComponentTambién puede vincular eventos a elementos o ranuras en componentes.

class Trace extends HTMLElement {
    
    
  constructor() {
    
    
    super();

    this.attachShadow({
    
     mode: "open" });

    const templateEle = document.getElementById("trace");
    const cloneEle = templateEle.content.cloneNode(true);
    cloneEle
      .querySelector(".container > .title")
      .addEventListener("click", this.onClick);

    this.shadowRoot.appendChild(cloneEle);
  }

  onClick = () => {
    
    
    alert("Click Me!");
  };
}

customElements.define("trace-ele", Trace);

Resumir

Lo anterior compartió principalmente con usted algunos métodos de uso de Web Component. En general, Web Component es una combinación de una serie de API:

Elemento personalizado : registro y uso de componentes
Shadow DOM : Aislar CSS
Plantilla HTML y ranura : estructura DOM flexible

Parece ser la implementación de infraestructura del marco principal actual, y el marco también se basa en las capacidades nativas para implementar un conjunto completo de soluciones, como el seguimiento receptivo de Vue y el enlace de datos de sintaxis de plantilla, todo lo cual queremos ver.

Lea y comprenda el componente web en un artículo