Web Components là gì
Tiêu chuẩn cho thành phần UI có thể tái sử dụng
Web Components là tập hợp các tiêu chuẩn web để tạo các phần tử HTML tùy chỉnh có thể tái sử dụng với chức năng được đóng gói.
Công nghệ Cốt lõi
- Custom Elements — tạo thẻ HTML tùy chỉnh
- Shadow DOM — đóng gói kiểu và đánh dấu
- HTML Templates — mẫu có thể tái sử dụng
- ES Modules — tải thành phần theo module
Lợi ích
- Hoạt động không cần framework
- Tương thích với tất cả trình duyệt
- Đóng gói kiểu
- Tái sử dụng qua các dự án
Ví dụ
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
}
customElements.define('my-button', MyButton);
Thư viện
- Lit (Google)
- Stencil (Ionic)
- FAST (Microsoft)