คืออะไร Web Components
มาตรฐานสำหรับส่วนประกอบ UI ที่ใช้ซ้ำได้
Web Components คือชุดมาตรฐานเว็บสำหรับสร้างองค์ประกอบ HTML แบบกำหนดเองที่ใช้ซ้ำได้พร้อมฟังก์ชันที่ห่อหุ้มไว้
เทคโนโลยีหลัก
- Custom Elements — สร้างแท็ก HTML แบบกำหนดเอง
- Shadow DOM — การห่อหุ้มสไตล์และมาร์กอัป
- HTML Templates — เทมเพลตที่ใช้ซ้ำได้
- ES Modules — โหลดส่วนประกอบแบบโมดูลาร์
ข้อดี
- ทำงานได้โดยไม่ต้องใช้เฟรมเวิร์ก
- เข้ากันได้กับทุกเบราว์เซอร์
- การห่อหุ้มสไตล์
- ใช้ซ้ำได้ข้ามโปรเจกต์
ตัวอย่าง
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
}
customElements.define('my-button', MyButton);
ไลบรารี
- Lit (Google)
- Stencil (Ionic)
- FAST (Microsoft)