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

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

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

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

什么是 Shadow DOM？

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

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

使用 Shadow DOM 的好處：

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

怎么創(chuàng)建一個(gè) 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>
`;

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

什么是 Custom Elements？

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

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

如何定義一個(gè) Custom Element？

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

示例代碼如下：

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

customElements.define('my-button', MyButton);

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

<my-button></my-button>

Shadow DOM 和 Custom Elements 能一起用嗎？

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

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

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

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

注意事項(xiàng)和小技巧

雖然這兩個(gè)特性很強(qiáng)大，但也有一些需要注意的地方：

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

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

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