如何在聚合物飞镖 1.0.0.rc2 中的本地 dom 上执行 querySelectorAll？答案

【问题标题】：How to perform querySelectorAll on local dom in polymer dart 1.0.0.rc2?如何在聚合物飞镖 1.0.0.rc2 中的本地 dom 上执行 querySelectorAll？
【发布时间】：2015-10-21 20:19:30
【问题描述】：

我想对聚合物元素的local dom 执行querySelectorAll。我想这样做很简单：

querySelectorAll("some selector");

不是好主意，因为所有这些 mistic shady/shadow dom 实现细节。我尝试了几种不同的方法：

var lst = Polymer.dom(root).querySelectorAll(".qtest");

为 js 数组提供包装器：

var lst2 = querySelectorAll(".qtest");

给出ElementList的实现：

var lst3 = convertToDart(Polymer.dom(root).querySelectorAll(".qtest"));

只是简单的List 元素：

简而言之：调用从local dom 返回ElementList 的querySelectorAll() 的正确方法是什么？

【问题讨论】：

我真的不知道这是否适用于 dart，但您是否尝试过使用 this.querySelectorAll()？据我所知，它返回一个节点列表，这可能是你想要的（这里有一个快速的example）
我相信在 Dart 中调用 this.method() 和 method() 没有区别。

标签： dart dart-polymer polymer-1.0

【解决方案1】：

Polymer.dom(root).querySelectorAll('some selector');

使用此 Polymer API 可确保即使在使用 shady DOM 或 shadow DOM polyfill 时也能获得所需的内容。

另见What are the different ways to look up elements in Polymer 1.0

【讨论】：

Polymer.dom(this).querySelectorAll() 返回light dom 中的元素，但我需要查询local dom。当然，我可以将this 更改为root，但还有其他问题：返回的列表不是ElementList 类型（例如我可以使用querySelectorAll().onClick，但没有Polymer.dom(this).querySelectorAll('').onClick 这样的东西）。
抱歉，我混淆了本地和轻量级 DOM。没错，这就是这个 API 的限制。在 JS 中创建 ElementList 是不可能的。解决方法是.forEach((e) => e.onClick)
谢谢。所以看来我需要创建自己的ElementsList 实现，因为一些现有的pub 包（如dnd）使用ElementList 类的成员。
启用 shadow DOM 可能会有所帮助 polymer-project.org/1.0/docs/devguide/settings.html 我假设使用 shadow DOM，普通的浏览器 API 可能会工作（就像之前的 Dart Polymer 版本一样，但是）我还没有仔细研究。另见polymer-project.org/1.0/articles/shadydom.html