Qual è la differenza tra componenti Web e elementi personalizzati?

Gli elementi personalizzati sono una parte specifica del Componenti web standard, insieme a DOM ombra, modelli e importazioni HTML.

Dalla specifica:

Custom elements provide a way for authors to build their own fully-featured DOM elements. Although authors could always use non-standard elements in their documents, with application-specific behaviour added after the fact by scripting or similar, such elements have historically been non-conforming and not very functional. By defining a custom element, authors can inform the parser how to properly construct an element and how elements of that class should react to changes.

Storia

Le specifiche sono ora in v1 . La versione precedente, v0, era stata supportata da Chrome 33 e aveva un'API diversa, utilizzando document.registerElement - che < a href="https://github.com/w3c/webcomponents/pull/405#issuecomment-191698136"> è ora deprecato .

Uso

Gli elementi personalizzati possono essere autonomi (creando un nuovo elemento da zero (ovvero estendendo HTMLElement ), oppure puoi 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 chiamata customElements.define() è il nome della classe che implementa il comportamento dell'elemento. Vedi gli esempi nelle specifiche per elementi autonomi e per 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 polyfilled per i browser più vecchi che tornano a Safari 7+ e IE11. Vedi anche il v1 polyfill .

Modelli e DOM ombra

Utilizzando Templates e DOM ombra 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 di definire gli stili, gli ID e le classi del contenuto su se stesso. Ciò impedisce il sanguinamento del CSS o l'accesso agli interni dell'elemento personalizzato al di fuori di esso.

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);
  }
  ...
});

Ulteriori informazioni

Google Developers articoli:

• Elementi personalizzati v1: componenti Web riutilizzabili
• Shadow DOM: componenti Web autonomi