Nedir Web Components
Yeniden kullanılabilir UI bileşenleri standardı
Web Components, kapsüllenmiş işlevselliğe sahip yeniden kullanılabilir özel HTML öğeleri oluşturmak için bir web standartları setidir.
Temel Teknolojiler
- Custom Elements — özel HTML etiketleri oluşturma
- Shadow DOM — stil ve işaretleme kapsülleme
- HTML Templates — yeniden kullanılabilir şablonlar
- ES Modules — modüler bileşen yükleme
Faydalar
- Framework olmadan çalışır
- Tüm tarayıcılarla uyumlu
- Stil kapsülleme
- Projeler arasında yeniden kullanılabilir
Örnek
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
}
customElements.define('my-button', MyButton);
Kütüphaneler
- Lit (Google)
- Stencil (Ionic)
- FAST (Microsoft)