„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.
źródło
„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.
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 .
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 .
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);
}
...
});
Artykuły dla programistów Google :