使用 Shadow DOM 的缺點是什么？

Question

在教程中，我只看到了 Shadow DOM 的好處，但也應該有缺點。 在哪些情況下我們應該避免使用 Shadow DOM？

Answer 1

Shadow DOM 特性既可以被視為優點，也可以被視為缺點：

如果您願意，樣式隔離是一個好處，但如果用戶想要使用全局 CSS 樣式表中的 Shadow DOM 設置組件樣式，則它是一個缺點。

DOM 陰影在某些情況下是一個好處，但如果外部腳本/庫或擴展需要解析或選擇內容，則它是一個缺點。

有許多 3rd 方庫（或擴展）不能處理 Shadow DOM 內容，因為它們不是為處理它而設計的，或者需要一些額外的配置來處理 Shadow DOM。

例子：

• Disqus評論集成
• CodeMirror 編輯器集成
• Wiris 數學編輯器集成

此外，解析 HTML 的擴展程序將在 Shadow DOM 邊界被阻止：如果您不想窺探，這是一個好處，如果您將它們視為有用的服務，則是一個缺點。

事件傳播在 Shadow DOM 內部和外部是不同的。 因此，您在處理 UI 事件時可能會遇到一些困難。

示例：

• TinyMCE 集成

結論

• 僅當您需要 CSS 樣式或 DOM 隔離時才使用 Shadow DOM。

• 如果您需要與一些不兼容的第三方組件或庫進行交互，請不要使用 Shadow DOM。

Answer 2

嗯嗯，這個技術的規范還沒有穩定下來，很多瀏覽器都不支持。 我稱之為缺點。

請參閱： https : //developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow

現在我想說； 在大多數情況下避免使用，除非您想嘗試新的東西並且它不適用於生產環境。