Question

阅读此wiki page后，在Polymer Dart 1.0.0上，并阅读目前Polymer Dart默认使用shady dom的事实（不是这对我来说是一个惊喜），你可以将它改为使用影子dom。如果使用阴影dom，我的一些最新元素将无效。我想知道如何在运行时使用阴影或阴暗的dom来检测它？

Answer 1

在Polymer对象上设置了未记录的布尔标志：

Polymer.Settings.useNativeShadow

设置为useShadow && nativeShadow，如果两者都是true，则请求Shadow DOM，浏览器支持它。

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

Answer 2

我不知道官方方法，但您可以使用document.querySelector('some-shadowed-element')查询已知隐藏在自定义元素的阴影DOM中的元素，如果找到它则使用阴影DOM，否则它是阴影DOM。

您不应该在应用程序中区分shady和shadow DOM。如果您使用适当的API来操作内容（new PolymerDom(...)...），那么您的元素应该在两种模式下都有效。

Answer 3

我似乎回答了我自己的问题。我忘记了shadowRoot。在从旧的Polymer Dart迁移到Polymer Dart 1.0.0时，我必须删除对shadowRoot的任何引用，因为它们为null。如果shadowRoot为null，那么你正在使用shady DOM，否则它是shadow DOM。此方法将在元素内部工作。

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

我用两者进行了测试

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

和

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

它似乎完成了我想要的工作。

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

3 个答案: