Shadow DOM 可讓網頁開發人員為網頁元件建立分隔的 DOM 和 CSS
摘要
Shadow DOM 可消除建構網頁應用程式的脆弱性。脆弱性源自 HTML、CSS 和 JS 的全球性質。多年來,我們發明瞭大量工具來解決這些問題。舉例來說,當您使用新的 HTML ID/類別時,無法得知該 ID/類別是否會與網頁使用的現有名稱發生衝突。隱藏的錯誤會逐漸浮現,CSS 特異性會變成大問題 (!important
所有東西!),樣式選取器會失控,且效能可能會受到影響。類似的例子不勝枚舉。
Shadow DOM 會修正 CSS 和 DOM。這項功能會在網路平台中導入範圍樣式。即使沒有工具或命名慣例,您也可以將 CSS 與標記合併、隱藏實作詳細資料,以及在純 JavaScript 中撰寫自給自足的元件。
簡介
Shadow DOM 是三個網頁元件標準之一:HTML 範本、Shadow DOM 和自訂元素。HTML 匯入 曾是清單的一部分,但現在已被視為已淘汰。
您不必撰寫使用 shadow DOM 的網頁元件。不過,您可以利用 CSS 的優點 (CSS 範圍、DOM 封裝、組合) 建構可重複使用的自訂元素,這些元素具有彈性、可高度設定且非常可重複使用。如果您想透過 JS API 建立新的 HTML,可以使用自訂元素,而 shadow DOM 則是提供 HTML 和 CSS 的方式。這兩個 API 結合後,可製作出包含獨立 HTML、CSS 和 JavaScript 的元件。
Shadow DOM 是一種用來建構元件式應用程式的工具。因此,它為網頁開發中的常見問題提供解決方案:
- 隔離的 DOM:元件的 DOM 是自給自足的 (例如
document.querySelector()
不會在元件的 shadow DOM 中傳回節點)。 - 受限 CSS:在陰影 DOM 中定義的 CSS 會受限於該 DOM。樣式規則不會外洩,網頁樣式也不會外流。
- 組合:為元件設計宣告式、以標記為基礎的 API。
- 簡化 CSS:使用 DOM 範圍,您可以使用簡單的 CSS 選取器、更多通用 ID/類別名稱,且不必擔心命名衝突。
- 生產力:請將應用程式視為 DOM 的片段,而非一個大型 (全域) 頁面。
fancy-tabs
示範
在本文中,我會參照示範元件 (<fancy-tabs>
) 並參照其中的程式碼片段。如果您的瀏覽器支援這些 API,您應該會在下方看到即時示範。否則,請查看 GitHub 上的完整原始碼。
什麼是 Shadow DOM?
DOM 的背景
HTML 是網頁的動力來源,因為它很容易使用。只要宣告幾個標記,您就能在幾秒內建立包含呈現方式和結構的網頁。不過,HTML 本身並沒有太大用處。人類很容易理解以文字為基礎的語言,但機器需要更多資訊。進入文件物件模型 (DOM)。
瀏覽器載入網頁時,會執行許多有趣的操作。其中一個功能是將作者的 HTML 轉換為即時文件。基本上,為了瞭解網頁的結構,瀏覽器會將 HTML (文字的靜態字串) 解析為資料模型 (物件/節點)。瀏覽器會建立這些節點的樹狀結構 (DOM),以保留 HTML 的階層。DOM 的優點是,它是網頁的即時呈現方式。與我們撰寫的靜態 HTML 不同,瀏覽器產生的節點包含屬性和方法,而且最重要的是,可以由程式操控!因此,我們可以直接使用 JavaScript 建立 DOM 元素:
const header = document.createElement('header');
const h1 = document.createElement('h1');
h1.textContent = 'Hello DOM';
header.appendChild(h1);
document.body.appendChild(header);
產生下列 HTML 標記:
<body>
<header>
<h1>Hello DOM</h1>
</header>
</body>
一切都很順利。那麼,shadow DOM 到底是什麼呢?
DOM… 在陰影中
Shadow DOM 與一般 DOM 有兩個不同之處:1) 建立/使用方式,以及 2) 與網頁其他部分的行為。通常,您會建立 DOM 節點,並將其附加為其他元素的子項。使用 shadow DOM 時,您會建立範圍限定的 DOM 樹狀結構,該結構會附加至元素,但與實際子項分開。這個受限子樹狀結構稱為遮罩樹狀結構。所附加的元素為其陰影主機。您在陰影中新增的任何內容都會成為代管元素的本機內容,包括 <style>
。這就是陰影 DOM 實現 CSS 樣式範圍的方式。
建立影子 DOM
陰影根是附加至「主機」元素的文件片段。元素取得 shadow DOM 的方式,就是附加陰影根。如要為元素建立 shadow DOM,請呼叫 element.attachShadow()
:
const header = document.createElement('header');
const shadowRoot = header.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>'; // Could also use appendChild().
// header.shadowRoot === shadowRoot
// shadowRoot.host === header
我使用 .innerHTML
填入陰影根,但您也可以使用其他 DOM API。這就是網路。我們有選擇。
規格定義無法代管陰影樹狀結構的元素清單。元素可能會出現在清單中的原因有幾種:
- 瀏覽器已為元素 (
<textarea>
、<input>
) 代管其專屬的內部 Shadow DOM。 - 元素不應代管 shadow DOM (
<img>
)。
舉例來說,以下做法無法運作:
document.createElement('input').attachShadow({mode: 'open'});
// Error. `<input>` cannot host shadow dom.
為自訂元素建立 shadow DOM
建立自訂元素時,陰影 DOM 特別實用。使用 shadow DOM 將元素的 HTML、CSS 和 JS 分隔開來,進而產生「網頁元件」。
範例:自訂元素將 shadow DOM 附加至自身,封裝其 DOM/CSS:
// Use custom elements API v1 to register a new HTML tag and define its JS behavior
// using an ES6 class. Every instance of <fancy-tab> will have this same prototype.
customElements.define('fancy-tabs', class extends HTMLElement {
constructor() {
super(); // always call super() first in the constructor.
// Attach a shadow root to <fancy-tabs>.
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `
<style>#tabs { ... }</style> <!-- styles are scoped to fancy-tabs! -->
<div id="tabs">...</div>
<div id="panels">...</div>
`;
}
...
});
這裡發生了幾件有趣的事。第一個原因是,在建立 <fancy-tabs>
例項時,自訂元素會建立自己的 shadow DOM。constructor()
會執行這項操作。其次,由於我們要建立陰影根,因此 <style>
中的 CSS 規則會設為 <fancy-tabs>
的範圍。
組合和插槽
組合是 shadow DOM 中最不為人知的功能之一,但它可能是最重要的功能。
在網路開發的世界中,組合是指我們如何使用 HTML 宣告式建構應用程式。不同的構成元素 (<div>
、<header>
、<form>
、<input>
) 會組合成應用程式。其中有些標記甚至可以互相搭配使用。組合是 <select>
、<details>
、<form>
和 <video>
等原生元素如此靈活的原因。每個標記都會接受特定 HTML 做為子項,並對這些子項執行特殊動作。舉例來說,<select>
會將 <option>
和 <optgroup>
轉譯為下拉式選單和多重選取小工具。<details>
元素會將 <summary>
轉譯為可展開的箭頭。<video>
也知道如何處理特定子項:<source>
元素不會算繪,但會影響影片的行為。好神奇!
術語:light DOM 與 shadow DOM
Shadow DOM 組合會在網頁開發中引入許多新的基礎元素。在深入探討之前,我們先來統一一些術語,以便大家使用相同的用語。
Light DOM
元件使用者所撰寫的標記。這個 DOM 位於元件的 shadow DOM 之外。這是元素的實際子項。
<better-button>
<!-- the image and span are better-button's light DOM -->
<img src="gear.svg" slot="icon">
<span>Settings</span>
</better-button>
Shadow DOM
元件作者所寫的 DOM。Shadow DOM 是元件中的本機,可定義其內部結構、範圍 CSS,並封裝實作詳細資料。它還能定義如何轉譯元件使用者所撰寫的標記。
#shadow-root
<style>...</style>
<slot name="icon"></slot>
<span id="wrapper">
<slot>Button</slot>
</span>
壓縮的 DOM 樹狀結構
瀏覽器將使用者的 light DOM 分發至 shadow DOM 的結果,並算繪最終產品。扁平化樹狀結構是您在 DevTools 中最終看到的內容,也是在頁面上算繪的內容。
<better-button>
#shadow-root
<style>...</style>
<slot name="icon">
<img src="gear.svg" slot="icon">
</slot>
<span id="wrapper">
<slot>
<span>Settings</span>
</slot>
</span>
</better-button>
<slot> 元素
Shadow DOM 會使用 <slot>
元素將不同的 DOM 樹狀結構組合在一起。「Slot」是元件中的預留位置,使用者可以使用自己的標記填入。定義一或多個版位後,您就能在元件陰影 DOM 中算繪外部標記。基本上,您會說「在此處算繪使用者的標記」。
當 <slot>
邀請元素時,元素可「跨越」shadow DOM 邊界。這些元素稱為「分散式節點」。從概念上來說,分散式節點可能有點奇怪。插槽不會實際移動 DOM,而是在 shadow DOM 中的其他位置算繪 DOM。
元件可以在其 shadow DOM 中定義零個或多個版位。空白的廣告位元組可以提供備用內容。如果使用者未提供 light DOM 內容,插槽會轉譯其備用內容。
<!-- Default slot. If there's more than one default slot, the first is used. -->
<slot></slot>
<slot>fallback content</slot> <!-- default slot with fallback content -->
<slot> <!-- default slot entire DOM tree as fallback -->
<h2>Title</h2>
<summary>Description text</summary>
</slot>
您也可以建立命名時段。命名版位是陰影 DOM 中的特定空白,可讓使用者以名稱參照。
範例:<fancy-tabs>
的 shadow DOM 中的插槽:
#shadow-root
<div id="tabs">
<slot id="tabsSlot" name="title"></slot> <!-- named slot -->
</div>
<div id="panels">
<slot id="panelsSlot"></slot>
</div>
元件使用者宣告 <fancy-tabs>
的方式如下:
<fancy-tabs>
<button slot="title">Title</button>
<button slot="title" selected>Title 2</button>
<button slot="title">Title 3</button>
<section>content panel 1</section>
<section>content panel 2</section>
<section>content panel 3</section>
</fancy-tabs>
<!-- Using <h2>'s and changing the ordering would also work! -->
<fancy-tabs>
<h2 slot="title">Title</h2>
<section>content panel 1</section>
<h2 slot="title" selected>Title 2</h2>
<section>content panel 2</section>
<h2 slot="title">Title 3</h2>
<section>content panel 3</section>
</fancy-tabs>
如要瞭解平坦化樹狀結構的樣貌,請參考以下範例:
<fancy-tabs>
#shadow-root
<div id="tabs">
<slot id="tabsSlot" name="title">
<button slot="title">Title</button>
<button slot="title" selected>Title 2</button>
<button slot="title">Title 3</button>
</slot>
</div>
<div id="panels">
<slot id="panelsSlot">
<section>content panel 1</section>
<section>content panel 2</section>
<section>content panel 3</section>
</slot>
</div>
</fancy-tabs>
請注意,我們的元件可以處理不同的設定,但扁平化的 DOM 樹狀結構仍維持不變。我們也可以從 <button>
切換至 <h2>
。這個元件是為了處理不同類型的子項而編寫的,就像 <select>
一樣!
樣式
您可以使用許多選項為網頁元件設定樣式。使用陰影 DOM 的元件可由主頁面設定樣式、自行定義樣式,或提供鉤子 (以 CSS 自訂屬性的形式),供使用者覆寫預設值。
元件定義的樣式
shadow DOM 最實用的功能就是範圍 CSS:
- 外部網頁的 CSS 選取器不會套用至元件內部。
- 內部定義的樣式不會溢出。範圍限定為主機元素。
在陰影 DOM 中使用的 CSS 選取器會在本機套用至元件。實際上,這表示我們可以再次使用常見的 ID/類別名稱,而不必擔心會與頁面上其他位置產生衝突。在 Shadow DOM 中,簡單的 CSS 選取器是最佳做法。也能提升效能。
範例:在陰影根目錄中定義的樣式為本機
#shadow-root
<style>
#panels {
box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
background: white;
...
}
#tabs {
display: inline-flex;
...
}
</style>
<div id="tabs">
...
</div>
<div id="panels">
...
</div>
樣式表的範圍也限定為陰影樹:
#shadow-root
<link rel="stylesheet" href="styles.css">
<div id="tabs">
...
</div>
<div id="panels">
...
</div>
您是否曾想過,當您新增 multiple
屬性時,<select>
元素如何算繪多重選項小工具 (而非下拉式選單):
<select multiple>
<option>Do</option>
<option selected>Re</option>
<option>Mi</option>
<option>Fa</option>
<option>So</option>
</select>
<select>
可根據您在其上宣告的屬性,為自身設定不同的樣式。網頁元件也可以使用 :host
選取器自行設定樣式。
範例:元件本身的樣式
<style>
:host {
display: block; /* by default, custom elements are display: inline */
contain: content; /* CSS containment FTW. */
}
</style>
:host
的一個陷阱是,父項頁面中的規則比元素中定義的 :host
規則更具體。也就是外部樣式勝出。這可讓使用者從外部覆寫頂層樣式。此外,:host
只能在陰影根的內容中運作,因此您無法在陰影 DOM 外使用。
:host(<selector>)
的函式形式可讓您指定主機,前提是該主機與 <selector>
相符。這是元件封裝行為的絕佳方法,可根據主機回應使用者互動、狀態或樣式內部節點。
<style>
:host {
opacity: 0.4;
will-change: opacity;
transition: opacity 300ms ease-in-out;
}
:host(:hover) {
opacity: 1;
}
:host([disabled]) { /* style when host has disabled attribute. */
background: grey;
pointer-events: none;
opacity: 0.4;
}
:host(.blue) {
color: blue; /* color host when it has class="blue" */
}
:host(.pink) > #tabs {
color: pink; /* color internal #tabs node when host has class="pink". */
}
</style>
根據上下文設定樣式
如果元件或其任何祖系元件符合 <selector>
,:host-context(<selector>)
就會與該元件相符。這項功能的常見用途是根據元件的環境進行主題設定。舉例來說,許多人會將類別套用至 <html>
或 <body>
來進行主題設定:
<body class="darktheme">
<fancy-tabs>
...
</fancy-tabs>
</body>
:host-context(.darktheme)
會在為 .darktheme
的子項時,為 <fancy-tabs>
設定樣式:
:host-context(.darktheme) {
color: white;
background: black;
}
:host-context()
可用於主題設定,但使用 CSS 自訂屬性建立樣式鉤子會是更好的做法。
為分散式節點設定樣式
::slotted(<compound-selector>)
會比對分散至 <slot>
的節點。
假設我們已建立名稱徽章元件:
<name-badge>
<h2>Eric Bidelman</h2>
<span class="title">
Digital Jedi, <span class="company">Google</span>
</span>
</name-badge>
元件的 shadow DOM 可為使用者的 <h2>
和 .title
設定樣式:
<style>
::slotted(h2) {
margin: 0;
font-weight: 300;
color: red;
}
::slotted(.title) {
color: orange;
}
/* DOESN'T WORK (can only select top-level nodes).
::slotted(.company),
::slotted(.title .company) {
text-transform: uppercase;
}
*/
</style>
<slot></slot>
如您還記得,<slot>
不會移動使用者的輕量 DOM。當節點分散到 <slot>
時,<slot>
會轉譯其 DOM,但節點會實際保留在原處。發布前套用的樣式會在發布後繼續套用。不過,當 light DOM 分發時,可以採用額外的樣式 (由 shadow DOM 定義的樣式)。
以下是 <fancy-tabs>
的另一個更深入的範例:
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `
<style>
#panels {
box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
background: white;
border-radius: 3px;
padding: 16px;
height: 250px;
overflow: auto;
}
#tabs {
display: inline-flex;
-webkit-user-select: none;
user-select: none;
}
#tabsSlot::slotted(*) {
font: 400 16px/22px 'Roboto';
padding: 16px 8px;
...
}
#tabsSlot::slotted([aria-selected="true"]) {
font-weight: 600;
background: white;
box-shadow: none;
}
#panelsSlot::slotted([aria-hidden="true"]) {
display: none;
}
</style>
<div id="tabs">
<slot id="tabsSlot" name="title"></slot>
</div>
<div id="panels">
<slot id="panelsSlot"></slot>
</div>
`;
在這個範例中,有兩個版位:一個是用於分頁標題的命名版位,另一個是用於分頁面板內容的版位。當使用者選取分頁時,我們會將選取項目加粗並顯示其面板。方法是選取具有 selected
屬性的分散式節點。自訂元素的 JS (未顯示於此) 會在正確的時間新增該屬性。
從外部設定元件的樣式
您可以透過幾種方式從外部設定元件的樣式。最簡單的方法是使用標記名稱做為選取器:
fancy-tabs {
width: 500px;
color: red; /* Note: inheritable CSS properties pierce the shadow DOM boundary. */
}
fancy-tabs:hover {
box-shadow: 0 3px 3px #ccc;
}
外部樣式一律優先於 shadow DOM 中定義的樣式。舉例來說,如果使用者編寫了選取器 fancy-tabs { width: 500px; }
,就會取代元件的規則::host { width: 650px;}
。
為元件本身設定樣式,只能達到一定程度。不過,如果您想為元件內部設定樣式,會發生什麼情況?為此,我們需要 CSS 自訂屬性。
使用 CSS 自訂屬性建立樣式鉤子
如果元件作者使用 CSS 自訂屬性提供樣式鉤子,使用者就能調整內部樣式。這個概念與 <slot>
類似。您可以建立「樣式預留位置」,供使用者覆寫。
範例:<fancy-tabs>
可讓使用者覆寫背景顏色:
<!-- main page -->
<style>
fancy-tabs {
margin-bottom: 32px;
--fancy-tabs-bg: black;
}
</style>
<fancy-tabs background>...</fancy-tabs>
在 shadow DOM 中:
:host([background]) {
background: var(--fancy-tabs-bg, #9E9E9E);
border-radius: 10px;
padding: 10px;
}
在這種情況下,元件會使用 black
做為背景值,因為使用者已提供該值。否則,預設值為 #9E9E9E
。
進階主題
建立封閉式影像根目錄 (應避免)
還有另一種稱為「closed」模式的陰影 DOM。建立封閉的陰影樹時,外部 JavaScript 將無法存取元件的內部 DOM。這與 <video>
等原生元素的運作方式類似。JavaScript 無法存取 <video>
的 shadow DOM,因為瀏覽器使用封閉模式的 shadow root 實作這項操作。
範例:建立封閉式陰影樹狀結構:
const div = document.createElement('div');
const shadowRoot = div.attachShadow({mode: 'closed'}); // close shadow tree
// div.shadowRoot === null
// shadowRoot.host === div
其他 API 也會受到關閉模式的影響:
Element.assignedSlot
/TextNode.assignedSlot
會傳回null
Event.composedPath()
:與陰影 DOM 內元素相關聯的事件,傳回 []
以下是我總結的,為何不應使用 {mode: 'closed'}
建立 Web 元件:
人工安全感。攻擊者可以輕易劫持
Element.prototype.attachShadow
。封閉模式可防止自訂元素程式碼存取自身的陰影 DOM。這會導致完全失敗。相反地,如果您想使用
querySelector()
之類的項目,就必須先儲存參照。這完全違背封閉模式的原意!customElements.define('x-element', class extends HTMLElement {
constructor() {
super(); // always call super() first in the constructor.
this._shadowRoot = this.attachShadow({mode: 'closed'});
this._shadowRoot.innerHTML = '<div class="wrapper"></div>';
}
connectedCallback() {
// When creating closed shadow trees, you'll need to stash the shadow root
// for later if you want to use it again. Kinda pointless.
const wrapper = this._shadowRoot.querySelector('.wrapper');
}
...
});在封閉模式下,元件對使用者而言較不靈活。在建構網頁元件時,您可能會忘記新增某些功能。設定選項。使用者想要的用途。常見的例子是忘記為內部節點加入適當的樣式鉤子。在封閉模式下,使用者無法覆寫預設值和調整樣式。能夠存取元件的內部資料非常實用。最終,如果元件無法執行使用者想要的操作,他們會分支您的元件、尋找其他元件,或自行建立元件 :(
使用 JS 中的空格
shadow DOM API 提供可用於處理插槽和分散節點的實用工具。這些元素在編寫自訂元素時非常實用。
時間間隔變更事件
當一個分格的分散節點發生變更時,就會觸發 slotchange
事件。例如,如果使用者在輕量 DOM 中新增/移除子項。
const slot = this.shadowRoot.querySelector('#slot');
slot.addEventListener('slotchange', e => {
console.log('light dom children changed!');
});
如要監控 Light DOM 的其他類型變更,您可以在元素的建構函式中設定 MutationObserver
。
哪些元素會在一個版位中算繪?
有時您可能需要瞭解哪些元素與某個時段相關聯。呼叫 slot.assignedNodes()
即可找出單元格要算繪的元素。如果沒有任何節點在分發,{flatten: true}
選項也會傳回版位的備用內容。
舉例來說,假設您的 shadow DOM 如下所示:
<slot><b>fallback content</b></slot>
用量 | 撥打電話 | 結果 |
---|---|---|
<my-component>元件文字</my-component> | slot.assignedNodes(); |
[component text] |
<my-component></my-component> | slot.assignedNodes(); |
[] |
<my-component></my-component> | slot.assignedNodes({flatten: true}); |
[<b>fallback content</b>] |
元素會指派至哪個版位?
您也可以回答相反的問題。element.assignedSlot
會指出元素指派至哪個元件位置。
Shadow DOM 事件模型
事件從 shadow DOM 向上冒出時,系統會調整事件目標,以維持 shadow DOM 提供的封裝。也就是說,事件會重新指定目標,讓事件看起來像是來自元件,而不是 shadow DOM 中的內部元素。有些事件甚至不會傳播至陰影 DOM。
會跨越陰影邊界的事件包括:
- 焦點事件:
blur
、focus
、focusin
、focusout
- 滑鼠事件:
click
、dblclick
、mousedown
、mouseenter
、mousemove
等。 - 輪子事件:
wheel
- 輸入事件:
beforeinput
、input
- 鍵盤事件:
keydown
、keyup
- 組合事件:
compositionstart
、compositionupdate
、compositionend
- DragEvent:
dragstart
、drag
、dragend
、drop
等。
使用提示
如果陰影樹狀結構處於開啟狀態,呼叫 event.composedPath()
會傳回事件經過的節點陣列。
使用自訂事件
在陰影樹狀結構的內部節點上觸發的自訂 DOM 事件不會從陰影邊界冒出,除非事件是使用 composed: true
標記建立:
// Inside <fancy-tab> custom element class definition:
selectTab() {
const tabs = this.shadowRoot.querySelector('#tabs');
tabs.dispatchEvent(new Event('tab-select', {bubbles: true, composed: true}));
}
如果為 composed: false
(預設值),消費者就無法在陰影根目錄外監聽事件。
<fancy-tabs></fancy-tabs>
<script>
const tabs = document.querySelector('fancy-tabs');
tabs.addEventListener('tab-select', e => {
// won't fire if `tab-select` wasn't created with `composed: true`.
});
</script>
處理焦點
回想一下 Shadow DOM 的事件模型,在 Shadow DOM 內部觸發的事件會調整為看起來像是來自主控元素。舉例來說,假設您按一下陰影根目錄中的 <input>
:
<x-focus>
#shadow-root
<input type="text" placeholder="Input inside shadow dom">
focus
事件看起來會像是來自 <x-focus>
,而非 <input>
。同樣地,document.activeElement
會是 <x-focus>
。如果陰影根目錄是使用 mode:'open'
建立的 (請參閱「關閉模式」),您也可以存取獲得焦點的內部節點:
document.activeElement.shadowRoot.activeElement // only works with open mode.
如果有多個 shadow DOM 層級 (例如另一個自訂元素中的自訂元素),您需要遞迴鑽入 shadow 根目錄,才能找到 activeElement
:
function deepActiveElement() {
let a = document.activeElement;
while (a && a.shadowRoot && a.shadowRoot.activeElement) {
a = a.shadowRoot.activeElement;
}
return a;
}
另一個焦點選項是 delegatesFocus: true
選項,可擴充陰影樹狀結構中元素的焦點行為:
- 如果您按一下陰影 DOM 中的節點,而該節點不是可聚焦的區域,系統會將焦點移至第一個可聚焦的區域。
- 當 shadow DOM 中的節點取得焦點時,
:focus
會套用至主機,而非已取得焦點的元素。
示例:delegatesFocus: true
如何變更焦點行為
<style>
:focus {
outline: 2px solid red;
}
</style>
<x-focus></x-focus>
<script>
customElements.define('x-focus', class extends HTMLElement {
constructor() {
super(); // always call super() first in the constructor.
const root = this.attachShadow({mode: 'open', delegatesFocus: true});
root.innerHTML = `
<style>
:host {
display: flex;
border: 1px dotted black;
padding: 16px;
}
:focus {
outline: 2px solid blue;
}
</style>
<div>Clickable Shadow DOM text</div>
<input type="text" placeholder="Input inside shadow dom">`;
// Know the focused element inside shadow DOM:
this.addEventListener('focus', function(e) {
console.log('Active element (inside shadow dom):',
this.shadowRoot.activeElement);
});
}
});
</script>
結果
以上是 <x-focus>
聚焦 (使用者點選、按下分頁鍵、focus()
等) 時的結果,點選「可點選的 Shadow DOM 文字」,或將焦點放在內部 <input>
(包括 autofocus
)。
如果您設定 delegatesFocus: false
,則會看到以下畫面:
提示和秘訣
多年下來,我對撰寫網頁元件有了一些瞭解。我認為這些提示有些對您編寫元件和偵錯 shadow DOM 很有幫助。
使用 CSS 限制
一般來說,網頁元件的版面配置/樣式/繪製作業相當獨立。在 :host
中使用 CSS 容器可提升效能:
<style>
:host {
display: block;
contain: content; /* Boom. CSS containment FTW. */
}
</style>
重設可繼承的樣式
可繼承的樣式 (background
、color
、font
、line-height
等) 仍會在 Shadow DOM 中繼承。也就是說,這些元素會在預設情況下穿過 shadow DOM 邊界。如果您想從頭開始,請在可繼承樣式跨越陰影邊界時,使用 all: initial;
將其重設為初始值。
<style>
div {
padding: 10px;
background: red;
font-size: 25px;
text-transform: uppercase;
color: white;
}
</style>
<div>
<p>I'm outside the element (big/white)</p>
<my-element>Light DOM content is also affected.</my-element>
<p>I'm outside the element (big/white)</p>
</div>
<script>
const el = document.querySelector('my-element');
el.attachShadow({mode: 'open'}).innerHTML = `
<style>
:host {
all: initial; /* 1st rule so subsequent properties are reset. */
display: block;
background: white;
}
</style>
<p>my-element: all CSS properties are reset to their
initial value using <code>all: initial</code>.</p>
<slot></slot>
`;
</script>
找出網頁使用的所有自訂元素
有時找出網頁上使用的自訂元素會很有幫助。為此,您需要遞迴方式檢視網頁中所有元素的 shadow DOM。
const allCustomElements = [];
function isCustomElement(el) {
const isAttr = el.getAttribute('is');
// Check for <super-button> and <button is="super-button">.
return el.localName.includes('-') || isAttr && isAttr.includes('-');
}
function findAllCustomElements(nodes) {
for (let i = 0, el; el = nodes[i]; ++i) {
if (isCustomElement(el)) {
allCustomElements.push(el);
}
// If the element has shadow DOM, dig deeper.
if (el.shadowRoot) {
findAllCustomElements(el.shadowRoot.querySelectorAll('*'));
}
}
}
findAllCustomElements(document.querySelectorAll('*'));
使用 <template> 建立元素
我們可以使用宣告式 <template>
,而非使用 .innerHTML
填入陰影根。範本是宣告網頁元件結構的理想預留位置。
請參閱「自訂元素:建構可重複使用的網頁元件」一文中的範例。
瀏覽記錄和瀏覽器支援
如果您過去幾年一直關注網頁元件,就會知道 Chrome 35 以上版本和 Opera 已推出舊版的陰影 DOM 一段時間。Blink 會持續一段時間並行支援這兩個版本。v0 規格提供不同的方法來建立陰影根目錄 (element.createShadowRoot
而非 v1 的 element.attachShadow
)。呼叫較舊的方法會繼續使用 v0 語意建立陰影根目錄,因此現有的 v0 程式碼不會中斷。
如果您對舊版 v0 規格有興趣,請參閱 html5rocks 的文章:1、2、3。另外,Shadow DOM v0 與 v1 之間的差異也提供了很棒的比較。
瀏覽器支援
Shadow DOM v1 已在 Chrome 53 (狀態)、Opera 40、Safari 10 和 Firefox 63 中推出。Edge 已開始開發。
如要偵測 Shadow DOM,請檢查 attachShadow
是否存在:
const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow;
聚酯纖維
在瀏覽器廣泛支援之前,shadydom 和 shadycss polyfill 可提供 v1 功能。Shady DOM 模擬 Shadow DOM 的 DOM 範圍,以及 shadycss polyfills CSS 自訂屬性和原生 API 提供的樣式範圍。
安裝 polyfill:
bower install --save webcomponents/shadydom
bower install --save webcomponents/shadycss
使用 polyfill:
function loadScript(src) {
return new Promise(function(resolve, reject) {
const script = document.createElement('script');
script.async = true;
script.src = src;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
// Lazy load the polyfill if necessary.
if (!supportsShadowDOMV1) {
loadScript('/bower_components/shadydom/shadydom.min.js')
.then(e => loadScript('/bower_components/shadycss/shadycss.min.js'))
.then(e => {
// Polyfills loaded.
});
} else {
// Native shadow dom v1 support. Go to go!
}
如要瞭解如何使用 shim/scope 樣式,請參閱 https://github.com/webcomponents/shadycss#usage。
結論
我們首次推出 API 原始元素,可進行適當的 CSS 範圍設定、DOM 範圍設定,並具備真正的組合功能。結合其他網頁元件 API (例如自訂元素),陰影 DOM 可讓您編寫真正封裝的元件,而無需使用駭客攻擊或 <iframe>
等舊式包裝。
請別誤會,Shadow DOM 確實是個複雜的怪物!但這項技術值得學習。花點時間使用這項服務。歡迎學習並提問!
延伸閱讀
- Shadow DOM v1 與 v0 之間的差異
- WebKit 網誌的「Introducing Slot-Based Shadow DOM API」。
- 網頁元件和模組化 CSS 的未來,作者:Philip Walton
- 參閱 Google WebFundamentals 的「自訂元素:建構可重複使用的網頁元件」。
- Shadow DOM 第 1 版規格
- 自訂元素 v1 規格
常見問題
我現在可以使用 Shadow DOM v1 嗎?
使用 polyfill 即可。請參閱「瀏覽器支援」。
shadow DOM 提供哪些安全防護功能?
Shadow DOM 並非安全功能,這是一個輕量工具,可用於設定 CSS 範圍,並隱藏元件中的 DOM 樹狀結構。如需真正的安全界線,請使用 <iframe>
。
網頁元件是否必須使用 shadow DOM?
不對!您不必建立使用 shadow DOM 的網頁元件。不過,撰寫使用 Shadow DOM 的自訂元素,可讓您利用 CSS 範圍、DOM 封裝和組合等功能。
開放式和封閉式陰影根有何差異?
請參閱「已關閉的陰影根」。