Hva er Web Components
Standard for gjenbrukbare UI-komponenter
Web Components er et sett med webstandarder for å lage gjenbrukbare tilpassede HTML-elementer med innkapslet funksjonalitet.
Kjerneteknologier
- Custom Elements — opprette tilpassede HTML-tagger
- Shadow DOM — stil- og markup-innkapsling
- HTML Templates — gjenbrukbare maler
- ES Modules — modulær komponentlasting
Fordeler
- Fungerer uten rammeverk
- Kompatibel med alle nettlesere
- Stilinnkapsling
- Gjenbrukbar på tvers av prosjekter
Eksempel
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
}
customElements.define('my-button', MyButton);
Biblioteker
- Lit (Google)
- Stencil (Ionic)
- FAST (Microsoft)