在 Polymer 1.0 中查找元素有哪些不同的方法答案

【问题标题】：What are the different ways to look up elements in Polymer 1.0在 Polymer 1.0 中查找元素有哪些不同的方法
【发布时间】：2015-10-26 17:43:51
【问题描述】：

在 Polymer.dart 1.x 中有几种方法可以在 DOM 中查找元素。有什么区别。

【问题讨论】：

标签： dart dart-polymer

【解决方案1】：

  <body>
    <div id="top"></div>
    <app-element>
      <div id="child1"></div>
      <div id="child2"></div>
    </app-element>
    <script type="application/dart" src="index.dart"></script>
  </body>

<dom-module id='app-element'>
  <template>
    <button on-click="clickHandler">Query</button>
    <div id="shadow1"></div>
    <div id="shadow2"></div>
    <content></content>
  </template>
</dom-module>

app_element.dart 包含此导入

import 'dart:html' as dom;

使用 shady DOM（默认）

$["shadow1"]（仅适用于静态添加的元素）
- shadow1
dom.querySelectorAll('div')
- （由 Polymer 动态插入的 <div hidden>）
- top
- shadow1
- shadow2
- child1
- child2
querySelectorAll('div')
- shadow1
- shadow2
- child1
- child2
Polymer.dom(this).querySelectorAll('div')
- child1
- child2
Polymer.dom(this.root).querySelectorAll('div')
- shadow1
- shadow2
$$('div')（返回此选择器找到的第一个元素）
- shadow1

使用 shadow DOM（选择加入的全局设置）

$["shadow1"]（仅适用于静态添加的元素）
- shadow1
dom.querySelectorAll('div')
- （由 Polymer 动态插入的 <div hidden>）
- top
- child1
- child2
querySelectorAll('div')
- child1
- child2
Polymer.dom(this).querySelectorAll('div')
- child1
- child2
Polymer.dom(this.root).querySelectorAll('div')
- shadow1
- shadow2
$$('div')（返回此选择器找到的第一个元素）
- shadow1

当然可以使用.querySelectorAll(...) 而不是.querySelector(...)，但是因为它总是会返回.querySelectorAll(...) 返回的元素之一，所以我没有明确添加这些示例。

在 Polymer.dart 0.17 中启用 shadow DOM 的工作方式与 here for Polymer.js 解释的相同

【讨论】：

被引用的 shadow1 和 shadow2 在哪里？我只看到一个影子。
@st_clair_clarke 感谢您的信息。现在已经修好了。