Chúng được sử dụng để tạo các phần tử tùy chỉnh có thể sử dụng lại, nó rất khó thực hiện trong HTML truyền thống. Nó bao gồm ba công nghệ: **Custom elements** - Đây là các API JavaScript giúp xác định các phần tử tùy chỉnh và hành vi của chúng. Shadow DOM -Đây là các API JavaScript gắn cây shadow DOM được đóng gói vào một phần tử để giữ các tính năng của phần tử đó riêng tư và không bị ảnh hưởng bởi các phần khác. ```html composed and composedPath demo

`composed` and `composedPath` demo

``` ```js customElements.define('open-shadow', class extends HTMLElement { constructor() { super(); const pElem = document.createElement('p'); pElem.textContent = this.getAttribute('text'); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.appendChild(pElem); } } ); customElements.define('closed-shadow', class extends HTMLElement { constructor() { super(); const pElem = document.createElement('p'); pElem.textContent = this.getAttribute('text'); const shadowRoot = this.attachShadow({mode: 'closed'}); shadowRoot.appendChild(pElem); } } ); document.querySelector('html').addEventListener('click', e => { console.log(e.composed); console.log(e.composedPath()); }); ``` ![](https://github.com/Ren0503/fullstack-interviews/raw/main/frontend/html/assets/Explain_Web_Components_and_it%E2%80%99s_usage..png) Ở đây 2 phần tử tùy chỉnh được xác định là `` và `` lấy nội dung văn bản của chúng và chèn chúng vào DOM bóng như nội dung của phần tử `

`. - **HTML Template** Các template đánh dấu được viết bằng các phần tử `

composed and composedPath demo

Simple template

`composed` and `composedPath` demo

Thẻ tự đóng (self closing tag) trong HTML là gì?