在 Chrome 63 中移除 ::shadow 和 /deep/

Rob Dodson

自 Chrome 63 版起，您無法使用陰影穿透選取器 ::shadow 和 /deep/ 為陰影根目錄中的內容設定樣式。

  • /deep/ 組合運算元式會做為子項選取器。x-foo /deep/ div 會像 x-foo div 一樣運作。
  • ::shadow 擬似元素不會與任何元素相符。

移除決定

::shadow 和 /deep/ 已在 Chrome 第 45 版中淘汰。這是 2015 年 4 月的 Web 元件聚會上所有參與者所決定的。

陰影穿透選取器的主要問題在於，它會違反封裝，並導致元件無法再變更其內部實作情況。

CSS Shadow Parts 規格正在進展中，可做為陰影穿透選取器的替代方案。陰影元件可讓元件作者以保留封裝的方式公開命名元素，同時讓網頁作者能夠一次設定多個屬性的樣式。

如果我的網站使用 ::shadow 和 /deep/，該怎麼辦？

::shadow 和 /deep/ 選取器只會影響舊版 Shadow DOM v0 元件。如果您使用的是 Shadow DOM v1，則不需要變更網站上的任何內容。

您可以使用 Chrome Canary 驗證網站在這些新變更後是否正常運作。如果發現問題，請嘗試移除任何 ::shadow 和 /deep/ 的用法。如果移除這些選取器的用法太困難，請考慮從原生陰影 DOM 切換至陰影 DOM polyfill。只有在網站依賴原生陰影 DOM v0 時，才需要進行這項變更。

更多資訊

Intent to Remove | Chromestatus Tracker | Chromium Bug