Shadow DOM 用於創(chuàng)建獨立的DOM 樹實現(xiàn)樣式和結(jié)構(gòu)隔離，Custom Elements 用於定義自定義HTML 元素提升復(fù)用性和語義化。 1. Shadow DOM 提供樣式隔離、結(jié)構(gòu)封裝和避免衝突，通過attachShadow 方法創(chuàng)建。 2. Custom Elements 通過繼承HTMLElement 類並註冊新標(biāo)籤實現(xiàn)組件化。 3. 兩者常結(jié)合使用，在構(gòu)造函數(shù)中創(chuàng)建Shadow DOM 以實現(xiàn)即插即用的組件。 4. 應(yīng)用場景包括構(gòu)建組件庫、封裝第三方組件及需要高度隔離的模塊。 5. 注意命名需含短橫線、模式選擇影響外部訪問及框架支持差異。

Shadow DOM 和Custom Elements 是現(xiàn)代Web 開發(fā)中非常重要的兩個概念，它們屬於Web Components 的一部分，主要用於構(gòu)建可複用、封裝性好的UI 組件。

簡單來說， Shadow DOM 讓你可以在一個元素內(nèi)部創(chuàng)建一個完全獨立的DOM 樹，並且這個樹不會受到外部樣式和腳本的影響；而Custom Elements 則允許開發(fā)者定義自己的HTML 元素，並賦予它特定的行為和結(jié)構(gòu)。

下面我們就從使用場景出發(fā)，看看它們到底有什麼用、怎麼用。

什麼是Shadow DOM？

Shadow DOM 是一種將隱藏的DOM 樹附加到某個元素上的技術(shù)。你可以把它理解為“嵌套在普通DOM 中的小世界”，它有自己的樣式和結(jié)構(gòu)，不會輕易被外部影響。

舉個最簡單的例子：瀏覽器自帶的<video></video>或<input type="range">元素，它們的內(nèi)部結(jié)構(gòu)其實是隱藏的，這些就是通過Shadow DOM 實現(xiàn)的。

使用Shadow DOM 的好處：

• 樣式隔離：你在Shadow DOM 裡寫的CSS 不會污染全局。
• 結(jié)構(gòu)封裝：組件內(nèi)部的實現(xiàn)細(xì)節(jié)對外部不可見。
• 避免衝突：多個組件可以有相同類名但不同樣式，互不干擾。

怎麼創(chuàng)建一個Shadow DOM？

 const host = document.querySelector('#myHost');
const shadowRoot = host.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    p { color: red; }
  </style>
  <p>我是Shadow DOM 裡的內(nèi)容</p>
`;

這樣，你就給一個元素添加了一個帶樣式的獨立DOM 結(jié)構(gòu)。

什麼是Custom Elements？

Custom Elements 就是自定義HTML 標(biāo)籤。比如你可以創(chuàng)建一個叫<my-button>的標(biāo)籤，然後讓它渲染成一個帶有特定功能和樣式的按鈕。

它最大的價值在於提高代碼復(fù)用性和語義化頁面結(jié)構(gòu)。你可以把一些常用UI 組件寫成Custom Element，在多個項目中直接使用。

如何定義一個Custom Element？

1. 創(chuàng)建一個類，繼承HTMLElement
2. 在類中定義你需要的行為（如constructor、connectedCallback 等）
3. 用customElements.define()註冊這個元素

示例代碼如下：

 class MyButton extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <button>點擊我</button>
      <style>
        button { background: blue; color: white; padding: 10px; }
      </style>
    `;
  }
}

customElements.define(&#39;my-button&#39;, MyButton);

之後就可以在HTML 中使用了：

 <my-button></my-button>

Shadow DOM 和Custom Elements 能一起用嗎？

當(dāng)然可以！而且這是最常見的組合方式。

Custom Elements 通常會在構(gòu)造函數(shù)中創(chuàng)建Shadow DOM，從而實現(xiàn)組件的結(jié)構(gòu)和樣式封裝。這種結(jié)合讓你可以真正寫出“即插即用”的組件。

常見應(yīng)用場景包括：

• 構(gòu)建設(shè)計系統(tǒng)或組件庫（如按鈕、輸入框等）
• 封裝第三方組件（比如嵌入地圖、圖表）
• 需要高度樣式隔離的模塊

注意事項和小技巧

雖然這兩個特性很強大，但也有一些需要注意的地方：

• Shadow DOM 中的樣式不會穿透到外部，但可以通過:host控制宿主元素的樣式。
• 可以使用mode: 'open'或'closed'來控制是否可以從外部訪問Shadow DOM。
• Custom Elements 的命名必須包含短橫線- ，比如my-card ，不能是單個單詞。
• 如果你的項目使用了框架（如React、Vue），它們對Custom Elements 的支持略有差異，需要額外配置。

基本上就這些。掌握Shadow DOM 和Custom Elements，能幫助你更好地理解和構(gòu)建現(xiàn)代前端組件結(jié)構(gòu)，雖然一開始有點陌生，但用起來其實不復(fù)雜，只是容易忽略一些細(xì)節(jié)。

以上是什麼是陰影dom和自定義元素？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！