聚合物：自定義元素不隱藏標記，css

Question

當我第一次閱讀聚合物的基礎知識時，我認爲聚合物標籤內的所有內容（html，css，js）都隱藏在陰影DOM中。用一個簡單的例子練習了一下後，我意識到我添加到自定義元素中的所有標記都可以看作Light DOM元素，並且不會被隱藏！

我試過舊版本的聚合物，它似乎只是做我的預期！但後來我有一些瀏覽器兼容性問題。我很困惑這一切。

如果自定義元素中的所有內容都應該隱藏到Shadow DOM中，爲什麼我的css和標記「暴露」而不隱藏也沒有封裝？

Image showing an example using an OLD version of Polymer

Image showing the same example with the CURRENT version where styles and markup are visible

感謝

Answer 1

你看到的是影子DOM填充工具，而不是原生陰影DOM。在polyfill下，Polymer將您在Shadow DOM中定義的節點呈現爲元素的子節點。沒有辦法真正模仿SD的封裝特性。 polyfill盡其所能。

要查看本機Shadow DOM，請使用Chrome Canary並打開about：flags中的「實驗性網絡平臺功能」標誌。好消息是，當原生Shadow DOM在瀏覽器中可用時（即將用於Chrome，即將用於FF），Polymer將使用它，並且您的元素確實會被封裝。

背景：

鉻在M25發佈影子DOM的早期版本。這已被棄用。您談論的早期版本的聚合物很可能使用舊的API（webkitCreateShadowRoot）。