Jaka jest różnica między komponentami sieciowymi a elementami niestandardowymi?

„Składniki sieciowe” i „Elementy niestandardowe” są często pomieszane, a wyszukiwania w sieci tytułu tego pytania nie są jeszcze zbyt jasne. Naprawmy to.

Elementy niestandardowe są częścią specyfikacji standardu Web Components wraz z Shadow DOM, szablonami i importami HTML.

Ze specyfikacji:

Elementy niestandardowe umożliwiają autorom tworzenie własnych, w pełni funkcjonalnych elementów DOM. Chociaż autorzy zawsze mogli używać niestandardowych elementów w swoich dokumentach, a zachowanie specyficzne dla aplikacji dodawano po fakcie przez skrypty lub podobne elementy, historycznie takie elementy były niezgodne i niezbyt funkcjonalne. Definiując element niestandardowy, autorzy mogą poinformować analizator składni, w jaki sposób poprawnie konstruować element i jak elementy tej klasy powinny reagować na zmiany.

Historia

W opisie jest w V1 . Poprzednia wersja, v0, była obsługiwana od Chrome 33 i miała inny interfejs API, używając document.registerElement- który jest już nieaktualny .

Stosowanie

Elementy niestandardowe mogą być autonomiczne (tworzenie nowego elementu od zera (tzn. Rozszerzanie HTMLElement ) lub dostosowywanie istniejącego elementu HTML (takiego jak HTMLButtonElement).

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

Drugim parametrem customElements.define()wywołania jest nazwa klasy implementującej zachowanie elementu. Zobacz przykłady w specyfikacji dla elementów autonomicznych i niestandardowych elementów wbudowanych .

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

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

Elementy niestandardowe są obsługiwane natywnie w niektórych nowoczesnych przeglądarkach i mogą być wypełniane w starszych przeglądarkach wracających do Safari 7+ i IE11. Zobacz także polifill v1 .

Szablony i Shadow DOM

Używając szablonów i Shadow DOM w elemencie niestandardowym, możesz ułatwić obsługę tego elementu i ponowne użycie.

Szablony pozwalają używać HTML do deklarowania struktury niestandardowych elementów:

<!-- 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 pozwala na określenie zakresu stylów, identyfikatorów i klas zawartości. Zapobiega to krwawieniu CSS lub dostępowi do elementów wewnętrznych elementu spoza niego.

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

Ucz się więcej

Artykuły dla programistów Google :

• Elementy niestandardowe v1: komponenty sieciowe wielokrotnego użytku
• Shadow DOM: samodzielne komponenty sieciowe