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

后端未结

关注

 1  1302

甜味超标

There are several way in Polymer.dart 1.x to look up elements in the DOM. What are the differences.

相关标签:

1条回答

一生所求

2020-12-10 09:47
```
  <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>
```
The app_element.dart contains this import
```
import 'dart:html' as dom;
```
With shady DOM (default)
- $["shadow1"] (works only for statically added elements)
  - shadow1
- dom.querySelectorAll('div')
  - (a <div hidden> dynamically inserted by 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') (returns the first element found by this selector)
  - shadow1
With shadow DOM (global setting to opt in)
- $["shadow1"] (works only for statically added elements)
  - shadow1
- dom.querySelectorAll('div')
  - (a <div hidden> dynamically inserted by Polymer)
  - top
  - child1
  - child2
- querySelectorAll('div')
  - child1
  - child2
- Polymer.dom(this).querySelectorAll('div')
  - child1
  - child2
- Polymer.dom(this.root).querySelectorAll('div')
  - shadow1
  - shadow2
- $$('div') (returns the first element found by this selector)
  - shadow1
Instead of .querySelectorAll(...) .querySelector(...) can be used of course but because it will always return one of the elements returned by .querySelectorAll(...) I didn't explicitely add these examples.

Enabling shadow DOM works the same in Polymer.dart 0.17 as explained here for Polymer.js
0 讨论(0)
发布评论:

提交评论
- 加载中...