聲明的影子Dom解釋了

聲明性的影子DOM允許開發人員直接在HTML中定義Shadow dom，從而通過在HTML解析過程中立即渲染封裝的內容來解決渲染的JavaScript問題，從而改善了性能，支持Next.js（例如Next.js），通過使SEO諸如SEO之類的SEO來增強SEO，從而增強陰影內容可消除和進步的增強功能；但是，它缺乏動態邏輯，具有範圍的樣式限制，目前僅限於基於鉻的瀏覽器，並通過使用JavaScript進行舊瀏覽器的後備策略。

聲明性的影子DOM是一個Web平台功能，它允許開發人員直接在HTML中定義陰影DOM結構，而不是通過JavaScript毫不猶豫地創建它們。這對於服務器端渲染（SSR）和改善Web組件的性能特別有用。

在潛水之前，讓我們簡要介紹什麼是Shadow dom是：這是一種封裝標記，樣式和行為的方法，以便它們不會洩漏到或受到頁面其餘部分的影響。傳統上，您使用這樣的JavaScript創建Shadow dom：

 const shadow = element.attachshadow（{mode：'open'}）;
shadow.innerhtml =&#39;<p> Shadow </p>&#39;中的內容;

但這只能在客戶端加載後運行。這意味著，如果您要在服務器上渲染組件，則直到JavaScript執行，延遲視覺渲染並損害性能，就無法使用Shadow DOM結構。

聲明性的影子圓頂解決了什麼

核心問題聲明的陰影dom地址是在Web組件中構造javaScript 。使用傳統的影子DOM，在JavaScript運行之前，您將看不到封裝的內容。這導致：

• 未風格的內容（FOUC）的閃光
• 延遲互動
• 可憐的SEO（搜索引擎可能不會等待JS執行）

聲明的影子DOM可讓您使用特殊的語法直接在HTML中編寫陰影根，因此瀏覽器可以立即解析並渲染包含的內容，甚至在JavaScript負載之前。

它的工作方式：語法

聲明的影子DOM引入了一個新的自定義元素： <template>帶有shadowroot屬性。這是一個例子：

 <my-component>
  <template shadowroot =“ open”>
    <樣式>
      p {顏色：藍色； }
    </style>
    <p>這立即在陰影dom中渲染。 </p>
  </template>
</my-component>

當瀏覽器解析此時，它會自動：

1. 與shadowroot一起找到<template>模板>
2. 將陰影根附加到父母（ <my-component> ）
3. 根據shadowroot值（ open或closed ）設置模式
4. 將模板的孩子移至陰影根

這一切都發生在HTML解析期間 - 不需要JavaScript。

注意：您通常仍然需要JavaScript來定義自定義元素（ customElements.define('my-component', ...) ），但是視覺結構已經到位。

用例和福利

1。更快的初始渲染速度

由於影子內容位於HTML中，因此用戶立即看到樣式的內容。不等待JS附著陰影根。

2。更好的SSR支持

諸如Next.js，Astro或Sveltekit之類的框架可以輸出完全渲染的Web組件，而Shadow dom baked在HTML中。即使還沒有進行水合，該組件看起來很完整。

3。改進的SEO

搜索引擎爬網可以在陰影DOM內部索引內容，因為它存在於初始HTML中。

4。漸進式增強

您可以構建無JavaScript的組件，然後在JS加載後增強它們。

重要的局限性

• 沒有動態邏輯：由於它是聲明性的，因此您不能使用模板中的條件或循環（與JS不同）。
• 造型範圍：模板內的樣式範圍範圍為陰影根 - 這很好，但是要小心全局重置。
• 瀏覽器支持：截至2024年，基於鉻的瀏覽器（Chrome，Edge等）支持。 Firefox和Safari仍在努力實施。

您可以在Caniuse.com上檢查當前狀態。

後備策略

如果您需要支持較舊的瀏覽器，請將聲明性和當務之急的方法結合在一起：

 <my-component>
  <template shadowroot =“ open”>
    <p>我在支持瀏覽器</p>時立即顯示
  </template>
</my-component>

<script>
//重用現有模板（如果尚未處理）
如果（！mycomponent.shadowroot）{
  const template = mycomponent.queryselector（&#39;[Shadowroot]&#39;）;
  如果（template）{
    const shadow = mycomponent.attachshadow（{mode：&#39;open&#39;}）;
    Shadow.appendChild（template.content.clonenode（true））;
  }
}
</script>

這樣可以確保優雅的降級。

聲明的影子DOM不會替換基於JavaScript的陰影DOM，它可以對其進行補充。這是邁出更具彈性，性能的網絡組件的一步，尤其是在現代SSR驅動的框架中。

基本上：寫一次，快速渲染，以後增強。

以上是聲明的影子Dom解釋了的詳細內容。更多資訊請關注PHP中文網其他相關文章！