Qual è la differenza tra i componenti Web e gli elementi personalizzati?

"Componenti Web" ed "Elementi personalizzati" sono spesso confusi e le ricerche sul Web per il titolo di questa domanda non producono ancora molta chiarezza. Risolviamolo.

Gli elementi personalizzati fanno parte delle specifiche dello standard Web Components , insieme alle importazioni Shadow DOM, Modelli e HTML.

Dalle specifiche:

Gli elementi personalizzati consentono agli autori di creare i propri elementi DOM completi. Sebbene gli autori possano sempre utilizzare elementi non standard nei loro documenti, con comportamenti specifici dell'applicazione aggiunti dopo il fatto tramite script o simili, tali elementi sono stati storicamente non conformi e non molto funzionali. Definendo un elemento personalizzato, gli autori possono informare il parser come costruire correttamente un elemento e come gli elementi di quella classe dovrebbero reagire ai cambiamenti.

Storia

Le specifiche sono ora in v1 . La versione precedente, v0, era supportata da Chrome 33 e utilizzava un'API diversa, document.registerElementche ora è obsoleta .

uso

Gli elementi personalizzati possono essere autonomi (creando un nuovo elemento da zero (ovvero estendendo HTMLElement ) oppure possono personalizzare un elemento HTML esistente (come HTMLButtonElement).

// autonomous element
customElements.define("flag-icon", FlagIcon);
// customized <button> element
customElements.define("plastic-button", PlasticButton, { extends: "button" });

Il secondo parametro della customElements.define()chiamata è il nome della classe che implementa il comportamento dell'elemento. Vedere gli esempi nelle specifiche per gli elementi autonomi e per gli elementi incorporati personalizzati .

class PlasticButton extends HTMLButtonElement {
  constructor() {
    super();

    this.addEventListener("click", () => {
      // Draw some fancy animation effects!
    });
  }
}

Gli elementi personalizzati sono supportati in modo nativo in alcuni browser moderni e possono essere riempiti con il polyfill per i browser più vecchi risalenti a Safari 7+ e IE11. Vedi anche il polyfill v1 .

Modelli e Shadow DOM

Usando Modelli e Shadow DOM in un elemento personalizzato, puoi rendere l'elemento più facile da gestire e riutilizzabile.

I modelli consentono di utilizzare HTML per dichiarare la struttura di elementi personalizzati:

<!-- Template Definition -->
<template id="fancy-element-template">
  <style>
    ...
  </style>
  <div id="container">
    <p>Some fancy markup goes here...</p>
  </div>
</template>

<!-- Custom Element usage -->
<fancy-element></fancy-element>

Shadow DOM consente agli stili, agli ID e alle classi del contenuto di essere associati a se stesso. Ciò impedisce l'emorragia CSS o l'accesso agli interni dell'elemento personalizzato dall'esterno.

customElements.define('fancy-element', class extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({mode: 'open'});
    const t = document.querySelector('#fancy-element-template');
    const instance = t.content.cloneNode(true);
    shadowRoot.appendChild(instance);
  }
  ...
});

Per saperne di più

Articoli per sviluppatori Google :

• Elementi personalizzati v1: componenti web riutilizzabili
• Shadow DOM: componenti web indipendenti