[TOC] ## 概述 1. 自定義元素的名稱必須包含連詞線 如`<user-card>`不能寫成`<usercard>` ### Shadow DOM 特性： 1. 封裝性：Shadow DOM 允許將組件的樣式和結構封裝在一起，避免了與全局樣式和 JavaScript 的沖突。 2. 隔離性：Shadow DOM 的內容在外部頁面上下文中是不可見的，從而確保組件的私有性。 3. 繼承性：Shadow DOM 內的樣式可以繼承外部樣式，并且外部樣式也可以影響到 Shadow DOM 內的樣式。 ## 指南 ### 自定義元素生命周期回調 ``` connectedCallback()：每當元素添加到文檔中時調用。規范建議開發人員盡可能在此回調中實現自定義元素的設定，而不是在構造函數中實現。 disconnectedCallback()：每當元素從文檔中移除時調用。 adoptedCallback()：每當元素被移動到新文檔中時調用。 attributeChangedCallback()：在屬性更改、添加、移除或替換時調用。有關此回調的更多詳細信息，請 ``` 示例 ``` // 為這個元素創建類 class MyCustomElement extends HTMLElement { static observedAttributes = ["color", "size"]; constructor() { // 必須首先調用 super 方法 super(); } connectedCallback() { console.log("自定義元素添加至頁面。"); } disconnectedCallback() { console.log("自定義元素從頁面中移除。"); } adoptedCallback() { console.log("自定義元素移動至新頁面。"); } attributeChangedCallback(name, oldValue, newValue) { console.log(`屬性 ${name} 已變更。`); } } customElements.define("my-custom-element", MyCustomElement); ``` ### 注冊自定義元素 **方式一:** 注冊 ``` window.customElements.define("word-count", WordCount, { extends: "p" }); ``` 使用 ``` <p is="word-count"></p> ``` **方式二:** 注冊 ``` window.customElements.define("popup-info", PopupInfo); ``` 使用 ``` <popup-info> <!-- 元素的內容 --> </popup-info> ``` ### 響應屬性變化 * 一個名為`observedAttributes`的靜態屬性。這必須是一個包含元素需要變更通知的所有屬性名稱的數組。 * `attributeChangedCallback()`生命周期回調的實現。 示例 ``` // 為這個元素創建類 class MyCustomElement extends HTMLElement { static observedAttributes = ["size"]; constructor() { super(); } attributeChangedCallback(name, oldValue, newValue) { console.log(`屬性 ${name} 已由 ${oldValue} 變更為 ${newValue}。`); } } customElements.define("my-custom-element", MyCustomElement); ``` 調用 ``` <my-custom-element size="100"></my-custom-element> ``` > size 在首次初始化時也會調用attributeChangedCallback ## 影子DOM 相關術語 ``` 影子宿主（Shadow host）: 影子 DOM 附加到的常規 DOM 節點。 影子樹（Shadow tree）: 影子 DOM 內部的 DOM 樹。 影子邊界（Shadow boundary）: 影子 DOM 終止，常規 DOM 開始的地方。 影子根（Shadow root）: 影子樹的根節點。 ``` ### 創建影子DOM ``` //html <div id="host"></div> <span>I'm not in the shadow DOM</span> //js const host = document.querySelector("#host"); const shadow = host.attachShadow({ mode: "open" }); const span = document.createElement("span"); span.textContent = "I'm in the shadow DOM"; shadow.appendChild(span); ``` > 此時如果更改全局根據 span 的樣式,則影子的DOM 中的span 不會更改 `{ mode: "open" }` 參數說明 啟用 open,則可以通過`host.shadowRoot.querySelectorAll("span")` 找到 span, 如果設置為 close,則找不到 ## 插槽 ``` <my-paragraph> <span slot="my-text">讓我們使用一些不同的文本！</span> </my-paragraph> ```