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

【问题标题】：How can you detect if Polymer is using Shady or Shadow DOM in Polymer Dart 1.0.0?如何检测 Polymer Dart 1.0.0 中 Polymer 是否使用了 Shady 或 Shadow DOM？
【发布时间】：2015-10-15 13:06:11
【问题描述】：

在阅读了这篇关于 Polymer Dart 1.0.0 的 wiki page 并阅读了当前 Polymer Dart 默认使用 shady dom 的事实（这对我来说并不奇怪）之后，您可以将其更改为使用 shadow大教堂。如果使用 shadow dom，我的一些最新元素将无法工作。我想知道如何检测运行时是否使用了 shadow 或 shady dom？

【问题讨论】：

标签： dart polymer dart-polymer

【解决方案1】：

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

Polymer.Settings.useNativeShadow

它被设置为useShadow && nativeShadow，所以如果两者都是true，你请求Shadow DOM，并且浏览器支持它。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

是的，这是我必须考虑的另一个角度。谢谢你。

【解决方案3】：

我似乎已经回答了我自己的问题。我忘记了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>

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

【讨论】：