(資料圖片)
Safari 技術預覽版 162 宣布開始支持聲明式 Shadow DOM (Declarative Shadow DOM),并將默認啟用,以便開發者在禁用 JavaScript,或采用服務器端渲染技術時,也能使用 Shadow DOM。
Shadow DOM 屬于 Web Components 中的三個主要技術之一,其他兩個技術是自定義元素和 HTML 模板。Web Components 的出現,是為了讓開發者創建可在網頁上重復使用的自定義小工具和元件,目前 Web Components 的所有技術都已經被整合到 DOM 和 HTML 標準中,被主流瀏覽器支持。
而在聲明式 Shadow DOM 的支持上,Chromium 系列瀏覽器的進度最快,早在 Chromium 90 支持就已開始,Safari 的瀏覽器引擎 Webkit 則是一直到現在才開始在技術預覽版中支持。Webkit 官方解釋了必須支持聲明式 Shadow DOM 的原因。
所謂 Shadow DOM,是為 DOM 樹提供一個輕量級封裝,因此開發者便可以在元素上創建一個平行的樹,該樹被稱為影子樹 (Shadow Tree),由于影子樹與主要文件的 DOM 樹分開渲染,能夠在不修改主要 DOM 樹的前提下,取代該元素的渲染,因此元素功能可以被腳本化和自定義化,而不需要擔心和文件的其他部分沖突。
Webkit 官方還提到,目前不少網頁應用程序會使用服務器端渲染技術,而使用該技術的網站通常會在渲染初期禁用 JavaScript,以減少繪制延遲。隨著腳本和相關元素的加載,才會慢慢強化內容互動性。但因為如此,這些網站便無法使用 Shadow DOM,因為 Shadow DOM 使用前提是必須調用 attachShadow (),而聲明式 Shadow DOM 則是通過在 HTML 中,引入 Shadow DOM 上下文的機制,以解決這個問題。
Webkit 官方還提到,目前 DOMParser 和 innerHTML 等 JavaScript 解析器 API,都沒有默認支持聲明式 Shadow DOM,這是避免在現有接受任意模板內容的網站上,產生跨站腳本漏洞。
由于聲明式 Shadow DOM 能夠在禁用 JavaScript,以及采用服務器端渲染的情況下,提供在 HTML 中定義影子樹的新方法,因此是一個重要且受開發者高度期待的功能,也備受瀏覽器開發商關注。主流瀏覽器 Chrome、Edge 和 Opera 都在 2021 年便已開始支持,Safari 在最近發布的技術預覽版中默認啟用,Firefox 則正在支持但尚未實現。