Web Components gồm những công nghệ nào?

Web Components là ba API dùng chung để tạo element tái sử dụng, không phụ thuộc framework:

1. Custom Elements — đăng ký thẻ riêng.
2. Shadow DOM — cô lập DOM và CSS bên trong.
3. HTML Template — <template> và <slot> để khai báo cấu trúc.

<template id="card-tpl">
  <style> .box { border: 1px solid #ddd; padding: 12px; } </style>
  <div class="box"><slot></slot></div>
</template>

<script>
class MyCard extends HTMLElement {
  connectedCallback() {
    const tpl = document.getElementById('card-tpl')
    this.attachShadow({ mode: 'open' })
        .append(tpl.content.cloneNode(true))
  }
}
customElements.define('my-card', MyCard)   // tên BẮT BUỘC có dấu gạch ngang
</script>

<my-card>Nội dung được chiếu vào slot</my-card>

Lợi ích thật sự: style bên trong không rò ra ngoài và bên ngoài không lọt vào, nên hợp với design system dùng chung giữa React/Vue/Angular, hoặc widget nhúng vào trang của khách.

Lưu ý: Shadow DOM chặn luôn CSS của bạn — muốn cho phép tuỳ biến phải chủ động mở qua CSS custom properties hoặc ::part().