<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)
dom.querySelectorAll('div')
- (a
<div hidden> dynamically inserted by Polymer)
topshadow1shadow2child1child2
querySelectorAll('div')
shadow1shadow2child1child2
Polymer.dom(this).querySelectorAll('div')
Polymer.dom(this.root).querySelectorAll('div')
$$('div') (returns the first element found by this selector)
With shadow DOM (global setting to opt in)
$["shadow1"] (works only for statically added elements)
dom.querySelectorAll('div')
- (a
<div hidden> dynamically inserted by Polymer)
topchild1child2
querySelectorAll('div')
Polymer.dom(this).querySelectorAll('div')
Polymer.dom(this.root).querySelectorAll('div')
$$('div') (returns the first element found by this selector)
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
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
