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

Question

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

Answer 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;

带黑幕DOM（默认）

$["shadow1"]（仅适用于静态添加的元素）
- shadow1
dom.querySelectorAll('div')
- (一个 <div hidden> 由 Polymer 动态插入)
- 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')（return是这个选择器找到的第一个元素）
- shadow1

有影子DOM（选择加入的全局设置）

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

而不是 .querySelectorAll(...) 当然可以使用 .querySelector(...) 但是因为它总是 return 由 .querySelectorAll(...) 编辑的元素之一 return 我没有不要明确添加这些示例。

启用阴影 DOM 在 Polymer.dart 0.17 中的工作方式与 here for Polymer.js

中解释的相同

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

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

dart

dart-polymer