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

Question

在阅读这篇关于 Polymer Dart 1.0.0 的文章 wiki page 并阅读当前 Polymer Dart 默认使用 shady dom 的事实后，（并不是说这让我感到惊讶），您可以将其更改为使用 shadow dom。如果使用 shadow dom，我的一些最新元素将无法使用。我想知道你如何检测你在运行时使用的是阴影还是阴影 dom？

Answer 1

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

您不需要在您的应用程序中区分阴影和影子 DOM。如果您使用正确的 API 来操纵您的内容 (new PolymerDom(...)...)，那么您的元素应该可以在两种模式下工作。

Answer 2

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

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

我测试过，两者都

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

和

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

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

Answer 3

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

Polymer.Settings.useNativeShadow

设置为useShadow && nativeShadow，所以是true，如果两者都是，你请求ShadowDOM，浏览器支持。

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

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

How can you detect if Polymer is using Shady or Shadow DOM in Polymer Dart 1.0.0?

dart

polymer

dart-polymer