Webové komponenty: mýty a pravda o Custom Elements

Webové komponenty: rozbor mýtů a reálné možnosti

Webové komponenty jsou často kritizovány za údajně omezený přenos vlastností pouze řetězci přes atributy. Toto nedorozumění vzniká z nepochopení mechanismu attributeChangedCallback. Atributy HTML jsou statickou součástí značkování, přímo nesouvisející s JS runtime. Pro přenos objektů, polí nebo primitiv použijte gettery/settery ve třídě komponenty. Prohlížeč umožňuje nastavovat vlastnosti libovolného typu přímo přes DOM API nebo proxy.

class MyElement extends HTMLElement {
  set data(value) {
    this._data = value;
    this.render();
  }
}

Shadow DOM zajišťuje izolaci stylů a DOM, což chrání před vnějšími konflikty. Kritika izolace jako vady ignoruje volbu: Custom Elements fungují bez Shadow DOM. Pro přizpůsobení použijte CSS proměnné a ::part():

my-component::part(button) {
  background: var(--accent-color);
}

Mýtus o duplikaci stylů: Adopted Style Sheets umožňují aplikovat společné styly na všechny instance Shadow DOM.

Životní cyklus začíná v konstruktoru, nikoli při připojení k DOM. Komponenty se vytvářejí v paměti, manipulují se přes DocumentFragment pro virtualizaci bez vykreslování.

Polopravda: registr a životní cyklus

Globální registr Custom Elements vyžaduje jedinečná jména. Řešením jsou předpony (např. app-button) a try/catch při registraci:

try {
  customElements.define('app-button', ButtonElement);
} catch (e) {
  console.warn('Konflikt jmen:', e);
}

Kolize se zachytávají testy. Ploché jmenné prostory jsou standardním vzorem v JS, DNS a HTML.

Háky connectedCallback/disconnectedCallback se spouštějí při přesunu v DOM. Oprava – příznak inicializace:

connectedCallback() {
  if (this._initialized) return;
  this._initialized = true;
  this.init();
}

Odregistrace není možná, ale je to výhoda: prohlížeč ukládá konstruktor do mezipaměti bez režie.

Reálné nuance a řešení

Parsování HTML spouští connectedCallback na otevírací značce před zpracováním obsahu. DOM API nejsou dostupná. Použijte defer nebo type="module" pro odloženou inicializaci. Alternativa – customElements.whenDefined():

const button = document.querySelector('app-button');
await customElements.whenDefined('app-button');
button.method();

Pro zajištění přístupu k potomkům použijte renderCallback nebo podobné háky.

Silné stránky webových komponent

Webové komponenty nativně spojují HTML značkování s JS. Vlastní značky jsou značky pro integraci na serveru nebo klientovi bez vendor lock-in.

Atomická správa cyklem: prohlížeč upozorňuje na připojení/odpojení nezávisle na frameworku.

Základní model pro Lit, Symbiote.js, mikro-frontendy. Funguje v React, Vue, Angular, SPA, SSR.

• Izolace bez režie: Shadow DOM je volitelný.
• Nativní reaktivita: vlastnosti + proxy.
• Univerzálnost: od widgetů po dashboardy s WebSocket a grafikou.
• Virtualizace: DocumentFragment pro seznamy s 100k+ prvky.
• Stylizace: CSS vars, ::part(), Adopted Style Sheets.

Co je důležité

• Vlastnosti libovolného typu se přenášejí přes gettery/settery, atributy – pouze pro řetězce.
• Shadow DOM izoluje, ale lze vypnout při potřebě; styly přes vars a ::part.
• Globální registr se řeší předponami a testy, kolize jsou vzácné.
• Háky connected/disconnected s příznakem zabraňují duplikaci inicializace.
• Asynchronita parsování se opravuje defer/module nebo whenDefined.

— Editorial Team