Utveckling
Vad är Web Components
Standard för återanvändbara UI-komponenter
Web Components är en uppsättning webbstandarder för att skapa återanvändbara anpassade HTML-element med inkapslad funktionalitet.
Kärnteknologier
- Custom Elements — skapa anpassade HTML-taggar
- Shadow DOM — stil- och markup-inkapsling
- HTML Templates — återanvändbara mallar
- ES Modules — modulär komponentladdning
Fördelar
- Fungerar utan ramverk
- Kompatibel med alla webbläsare
- Stilinkapsling
- Återanvändbar mellan projekt
Exempel
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
}
customElements.define('my-button', MyButton);
Bibliotek
- Lit (Google)
- Stencil (Ionic)
- FAST (Microsoft)