M

MLOG

Čeština

Objevte sílu Web Components se zaměřením na Custom Elements pro tvorbu znovupoužitelných a zapouzdřených UI komponent napříč různými webovými aplikacemi.

Web Components: Hloubkový pohled na Custom Elements

Web Components představují významný pokrok ve vývoji webu a nabízejí standardizovaný způsob tvorby znovupoužitelných a zapouzdřených UI komponent. Mezi klíčovými technologiemi, které tvoří Web Components, vynikají Custom Elements (vlastní prvky) jako základní kámen pro definování nových HTML značek s vlastním chováním a vykreslováním. Tento komplexní průvodce se noří do detailů Custom Elements, zkoumá jejich výhody, implementaci a osvědčené postupy pro tvorbu moderních webových aplikací.

Co jsou Web Components?

Web Components jsou sadou webových standardů, které umožňují vývojářům vytvářet znovupoužitelné, zapouzdřené a interoperabilní HTML prvky. Nabízejí modulární přístup k vývoji webu, což umožňuje vytvářet vlastní UI komponenty, které lze snadno sdílet a znovu používat v různých projektech a frameworcích. Mezi základní technologie Web Components patří:

Porozumění Custom Elements

Custom Elements jsou srdcem Web Components a umožňují vývojářům rozšířit slovník HTML o vlastní prvky. Tyto vlastní prvky se chovají jako standardní HTML prvky, ale mohou být přizpůsobeny specifickým potřebám aplikace, což poskytuje větší flexibilitu a lepší organizaci kódu.

Definování Custom Elements

Pro definování vlastního prvku je třeba použít metodu customElements.define(). Tato metoda přijímá dva argumenty:

  1. Název prvku: Řetězec představující název vlastního prvku. Název musí obsahovat pomlčku (-), aby se předešlo konfliktům se standardními HTML prvky. Například my-element je platný název, zatímco myelement nikoli.
  2. Třída prvku: JavaScriptová třída, která rozšiřuje HTMLElement a definuje chování vlastního prvku.

Zde je základní příklad:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = 'Hello, World!';
  }
}

customElements.define('my-element', MyElement);

V tomto příkladu definujeme vlastní prvek s názvem my-element. Třída MyElement rozšiřuje HTMLElement a v konstruktoru nastavuje vnitřní HTML prvku na "Hello, World!".

Lifecycle Callbacks vlastních prvků

Vlastní prvky mají několik zpětných volání (callbacks) životního cyklu, která umožňují spouštět kód v různých fázích života prvku. Tyto callbacks poskytují příležitosti k inicializaci prvku, reakci na změny atributů a uvolnění zdrojů, když je prvek odstraněn z DOMu.

Zde je příklad demonstrující použití lifecycle callbacks:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({mode: 'open'});
  }

  connectedCallback() {
    this.shadow.innerHTML = `
Connected to the DOM!
`;
    console.log('Element connected');
  }

  disconnectedCallback() {
    console.log('Element disconnected');
  }

  static get observedAttributes() { return ['data-message']; }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data-message') {
      this.shadow.innerHTML = `
${newValue}
`;
    }
  }
}

customElements.define('my-element', MyElement);

V tomto příkladu connectedCallback() zapíše zprávu do konzole a nastaví vnitřní HTML prvku, když je připojen k DOMu. disconnectedCallback() zapíše zprávu, když je prvek odpojen. attributeChangedCallback() se zavolá, když se změní atribut data-message, a podle toho aktualizuje obsah prvku. Geter observedAttributes specifikuje, že chceme sledovat změny atributu data-message.

Použití Shadow DOM pro zapouzdření

Shadow DOM poskytuje zapouzdření pro webové komponenty, což vám umožňuje vytvořit samostatný DOM strom pro komponentu, který je izolován od zbytku stránky. To znamená, že styly a skripty definované v rámci Shadow DOM neovlivní zbytek stránky a naopak. Toto zapouzdření pomáhá předcházet konfliktům a zajišťuje, že se vaše komponenty chovají předvídatelně.

Chcete-li použít Shadow DOM, můžete na prvku zavolat metodu attachShadow(). Tato metoda přijímá objekt s možnostmi, který specifikuje režim Shadow DOM. mode může být buď 'open' nebo 'closed'. Pokud je režim 'open', lze k Shadow DOM přistupovat z JavaScriptu pomocí vlastnosti shadowRoot prvku. Pokud je režim 'closed', nelze k Shadow DOM z JavaScriptu přistupovat.

Zde je příklad demonstrující použití Shadow DOM:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      
      
This is inside the Shadow DOM.

    `;
  }
}

customElements.define('my-element', MyElement);

V tomto příkladu připojíme k prvku Shadow DOM s mode: 'open'. Poté nastavíme vnitřní HTML Shadow DOM tak, aby obsahovalo styl, který nastavuje barvu odstavců na modrou, a odstavec s textem. Styl definovaný v rámci Shadow DOM se bude vztahovat pouze na prvky uvnitř Shadow DOM a neovlivní odstavce mimo něj.

Výhody použití Custom Elements

Custom Elements nabízejí několik výhod pro vývoj webu:

Praktické příklady Custom Elements

Pojďme se podívat na několik praktických příkladů, jak lze Custom Elements použít k vytvoření běžných UI komponent.

Jednoduchá komponenta čítače

Tento příklad ukazuje, jak vytvořit jednoduchou komponentu čítače pomocí Custom Elements.

class Counter extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._count = 0;
    this.render();
  }

  connectedCallback() {
    this.shadow.querySelector('.increment').addEventListener('click', () => {
      this.increment();
    });
    this.shadow.querySelector('.decrement').addEventListener('click', () => {
      this.decrement();
    });
  }

  increment() {
    this._count++;
    this.render();
  }

  decrement() {
    this._count--;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      
      

        
        ${this._count}
        
      

    `;
  }
}

customElements.define('my-counter', Counter);

Tento kód definuje třídu Counter, která rozšiřuje HTMLElement. Konstruktor inicializuje komponentu, připojí Shadow DOM a nastaví počáteční hodnotu čítače na 0. Metoda connectedCallback() přidává posluchače událostí k tlačítkům pro zvýšení a snížení hodnoty. Metody increment() a decrement() aktualizují hodnotu čítače a volají metodu render() pro aktualizaci zobrazení komponenty. Metoda render() nastavuje vnitřní HTML Shadow DOM tak, aby obsahovalo zobrazení čítače a tlačítka.

Komponenta obrázkového karuselu

Tento příklad ukazuje, jak vytvořit komponentu obrázkového karuselu pomocí Custom Elements. Pro stručnost jsou zdroje obrázků zástupné a mohly by být dynamicky načítány z API, CMS nebo lokálního úložiště. Stylování bylo také minimalizováno.

class ImageCarousel extends HTMLElement {
 constructor() {
  super();
  this.shadow = this.attachShadow({ mode: 'open' });
  this._images = [
  'https://via.placeholder.com/350x150',
  'https://via.placeholder.com/350x150/0077bb',
  'https://via.placeholder.com/350x150/00bb77',
  ];
  this._currentIndex = 0;
  this.render();
 }

 connectedCallback() {
  this.shadow.querySelector('.prev').addEventListener('click', () => {
  this.prevImage();
  });
  this.shadow.querySelector('.next').addEventListener('click', () => {
  this.nextImage();
  });
 }

 nextImage() {
  this._currentIndex = (this._currentIndex + 1) % this._images.length;
  this.render();
 }

 prevImage() {
  this._currentIndex = (this._currentIndex - 1 + this._images.length) % this._images.length;
  this.render();
 }

 render() {
  this.shadow.innerHTML = `
  
  

  Carousel Image
  

  
  
  

  

  `;
 }
}

customElements.define('image-carousel', ImageCarousel);

Tento kód definuje třídu ImageCarousel, která rozšiřuje HTMLElement. Konstruktor inicializuje komponentu, připojí Shadow DOM a nastaví počáteční pole obrázků a aktuální index. Metoda connectedCallback() přidává posluchače událostí k tlačítkům pro předchozí a další obrázek. Metody nextImage() a prevImage() aktualizují aktuální index a volají metodu render() pro aktualizaci zobrazení komponenty. Metoda render() nastavuje vnitřní HTML Shadow DOM tak, aby obsahovalo aktuální obrázek a tlačítka.

Osvědčené postupy pro práci s Custom Elements

Zde jsou některé osvědčené postupy, které je dobré dodržovat při práci s Custom Elements:

Custom Elements a frameworky

Custom Elements jsou navrženy tak, aby byly interoperabilní s jinými webovými technologiemi a frameworky. Mohou být použity ve spojení s populárními frameworky, jako jsou React, Angular a Vue.js.

Použití Custom Elements v Reactu

Chcete-li použít Custom Elements v Reactu, můžete je jednoduše vykreslit jako jakýkoli jiný HTML prvek. Možná však budete muset použít ref pro přístup k podkladovému DOM prvku a přímou interakci s ním.

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const myElementRef = useRef(null);

  useEffect(() => {
    if (myElementRef.current) {
      // Access the custom element's API
      myElementRef.current.addEventListener('custom-event', (event) => {
        console.log('Custom event received:', event.detail);
      });
    }
  }, []);

  return ;
}

export default MyComponent;

V tomto příkladu používáme ref pro přístup k vlastnímu prvku my-element a přidáváme k němu posluchač událostí. To nám umožňuje naslouchat vlastním událostem (custom events) odeslaným vlastním prvkem a odpovídajícím způsobem reagovat.

Použití Custom Elements v Angularu

Chcete-li použít Custom Elements v Angularu, musíte Angular nakonfigurovat tak, aby vlastní prvek rozpoznal. To lze provést přidáním vlastního prvku do pole schemas v konfiguraci modulu.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Jakmile je vlastní prvek registrován, můžete jej používat ve svých šablonách Angularu jako jakýkoli jiný HTML prvek.

Použití Custom Elements ve Vue.js

Vue.js také nativně podporuje Custom Elements. Můžete je používat přímo ve svých šablonách bez jakékoli speciální konfigurace.

Vue automaticky rozpozná vlastní prvek a správně jej vykreslí.

Aspekty přístupnosti

Při tvorbě Custom Elements je klíčové zvážit přístupnost, aby vaše komponenty byly použitelné pro všechny, včetně lidí s postižením. Zde jsou některé klíčové aspekty přístupnosti:

Internacionalizace a lokalizace

Při vývoji Custom Elements pro globální publikum je důležité zvážit internacionalizaci (i18n) a lokalizaci (l10n). Zde jsou některé klíčové aspekty:

Závěr

Custom Elements jsou mocným nástrojem pro tvorbu znovupoužitelných a zapouzdřených UI komponent. Nabízejí několik výhod pro vývoj webu, včetně znovupoužitelnosti, zapouzdření, interoperability, udržovatelnosti a výkonu. Dodržováním osvědčených postupů uvedených v tomto průvodci můžete využít Custom Elements k tvorbě moderních webových aplikací, které jsou robustní, udržovatelné a přístupné globálnímu publiku. Jak se webové standardy neustále vyvíjejí, Web Components, včetně Custom Elements, budou stále důležitější pro vytváření modulárních a škálovatelných webových aplikací.

Využijte sílu Custom Elements k budování budoucnosti webu, jednu komponentu po druhé. Nezapomeňte zvážit přístupnost, internacionalizaci a lokalizaci, abyste zajistili, že vaše komponenty budou použitelné pro všechny a všude.