Webové komponenty představují soubor technologií, které umožňují vytvářet opakovaně použitelné vlastní elementy – s jejich vlastními funkcionalitami, nezávisle na použitém knihovně nebo frameworku. Tato modularita vede k lepší organizaci kódu, snadnější údržbě a vývoji webových aplikací. Základními pilíři webových komponent jsou Custom Elements, Shadow DOM, HTML templates a ES Modules.

Custom Elements

Custom Elements umožňují vývojářům definovat vlastní HTML tagy. Tyto elementy mohou mít vlastní JavaScriptovou logiku a CSS styly, čímž se stávají plně funkčními komponentami, které lze v HTML použít stejně jako standardní elementy. Pro vytvoření custom elementu je nejprve nutné definovat třídu v JavaScriptu, která rozšiřuje HTMLElement, a poté tuto třídu zaregistrovat pomocí metody customElements.define().

Příklad:

class MojKomponent extends HTMLElement {
  constructor() {
    super();
    // inicializace komponenty
  }
}

customElements.define('moj-komponent', MojKomponent);

Shadow DOM

Shadow DOM umožňuje zapouzdření JavaScriptu a CSS vašeho komponentu, čímž se předejde konfliktům se styly a skripty na hlavní stránce. To znamená, že můžete mít styly definované uvnitř komponenty, které neovlivní a nebudou ovlivněny styly mimo komponentu.

Příklad:

class MojKomponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'}).innerHTML = `<style>p { color: red; }</style><p>Ahoj světe!</p>`;
  }
}

customElements.define('moj-komponent', MojKomponent);

HTML Templates

HTML Templates jsou šablony, které lze definovat v HTML pomocí elementu <template>. Tyto šablony mohou obsahovat jakýkoliv HTML kód, který zůstane "neaktivní", dokud nebude aktivován pomocí JavaScriptu. To je obzvláště užitečné pro definování struktury a obsahu komponent, které se mají dynamicky vkládat do DOM.

Příklad:

<template id="mujTemplate">
  <p>Ahoj světe!</p>
</template>

const template = document.getElementById('mujTemplate').content;
document.body.appendChild(template.cloneNode(true));

ES Modules

ES Modules (EcmaScript Modules) jsou standard pro modulární kód v JavaScriptu, který umožňuje importovat a exportovat části kódu mezi různými soubory. Tento přístup je ideální pro organizaci kódu webových komponent, protože umožňuje snadno sdílet funkce, třídy a další mezi komponentami.

Příklad:

// file: komponenta.js
export class MojKomponent extends HTMLElement {
  // definice třídy komponenty
}

// v jiném souboru
import { MojKomponent } from './komponenta.js';
customElements.define('moj-komponent', MojKomponent);

Webové komponenty nabízejí vývojářům mocný nástroj pro vytváření opakovaně použitelných, izolovaných a modulárních částí webových aplikací. Díky technologiím jako Custom Elements, Shadow DOM, HTML templates a ES Modules je možné vytvářet komplexní uživatelské rozhraní, které je snadno udržitelné a rozšiřitelné.