如何檢測Polymer是否在Polymer Dart 1.0.0中使用Shady或Shadow DOM？

Question

在閱讀完這個wiki page之後，在Polymer Dart 1.0.0上，並且閱讀了當前聚合物飛鏢默認使用陰影dom的事實（並非這對我來說是一個驚喜），並且您可以將其更改爲使用陰影dom。如果使用了影子dom，我的一些最新元素將無法工作。我想知道如何在運行時檢測是否使用陰影或陰影dom？

Answer 1

我似乎已經回答了我自己的問題。我忘了shadowRoot。在從舊版Polymer Dart遷移到Polymer Dart 1.0.0時，我不得不刪除對shadowRoot的任何引用，因爲它們爲空。如果shadowRoot爲null，那麼您使用的是陰影DOM，否則是陰影DOM。這個方法可以在元素內部工作。

... 
bool usesShadowDOM() { 
    return shadowRoot != null; 
} 
... 

我測試了，既

<script> 
    ... 
    Polymer.dom = 'shadow'; 
    ... 
</script> 

和

<script> 
    ... 
    Polymer.dom = 'shady'; 
    ... 
</script> 

，似乎這樣做，我也想工作。

Answer 2

我不知道官方的方式，但可以使用document.querySelector('some-shadowed-element')來查詢已知隱藏在自定義元素的陰影DOM中的元素，以及是否發現使用了陰影DOM，否則就是陰影DOM。

您不應該在應用程序中區分陰影和陰影DOM。如果您使用適當的API來操作您的內容（new PolymerDom(...)...），那麼您的元素應該可以在兩種模式下工作。

Answer 3

有一個沒有記錄布爾標誌設置好的上Polymer對象：

Polymer.Settings.useNativeShadow 

它被設置爲useShadow && nativeShadow，所以它是true如果兩個，你要求的影子DOM和瀏覽器支持它。

https://github.com/Polymer/polymer/blob/cb68ce54ebdcfb2d6f7342e801574881fb158076/src/lib/settings.html#L46