Mikä on Web Components
Standardi uudelleenkäytettäville UI-komponenteille
Web Components on joukko web-standardeja kapseloitua toiminnallisuutta sisältävien uudelleenkäytettävien mukautettujen HTML-elementtien luomiseen.
Ydinteknologiat
- Custom Elements — mukautettujen HTML-tagien luominen
- Shadow DOM — tyylien ja merkintöjen kapselointi
- HTML Templates — uudelleenkäytettävät mallit
- ES Modules — modulaarinen komponenttien lataus
Hyödyt
- Toimivat ilman kehyksiä
- Yhteensopiva kaikkien selainten kanssa
- Tyylien kapselointi
- Uudelleenkäytettävä projektien välillä
Esimerkki
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
}
customElements.define('my-button', MyButton);
Kirjastot
- Lit (Google)
- Stencil (Ionic)
- FAST (Microsoft)