Dart - 使用 Polymer 类中的 querySelector 引用外部 HTML div答案

【问题标题】：Dart - Referencing outer HTML div using querySelector from Polymer classDart - 使用 Polymer 类中的 querySelector 引用外部 HTML div
【发布时间】：2015-03-13 02:19:56
【问题描述】：

我正在尝试从聚合物 dart 类中获取外部 HTML(index.html) 的 div 的引用。我知道我可以通过以下代码查询app_element.html的div的引用：

shadowRoot.querySelector('#select_this')

但是，如果我要获得 index.html 的 div (#select_this) 的引用，我该如何从 app_element.dart 类中做到这一点？这甚至可能吗？如果没有，我该如何设计聚合物元素，以便它可以访问其他 HTML 页面的 DOM，而不仅仅是绑定该特定聚合物元素的页面？

app_element.dart

@CustomTag('app-element')
class AppElement extends PolymerElement {

  @override
  void attached() {
    var my_div = shadowRoot.querySelector('#select_this');  // contains app_element.html's #select_this div
  }
}

index.html

<html>
<body>
  <head>
    <link rel="import" href="../lib/app_element.html">
  </head>

  <app-element></app-element>

  <div id="select_this"></div> <!-- Not sure how to select this... -->

  <script type="application/dart">export 'package:polymer/init.dart';</script>-->
  <script src="packages/browser/dart.js"></script>
</body>
</html>

app_element.html

<!DOCTYPE html>
    <polymer-element name='app-element'>

        <div id="select_this"> <!-- selectable via: shadowRoot.querySelector('#select_this') -->

        <script type="application/dart" src="app_element.dart"></script>
    </polymer-element>

【问题讨论】：

标签： html dart polymer dart-polymer

【解决方案1】：

改用文档querySelector：

import 'dart:html';

...

document.querySelector('#select_this');

你可以访问其他元素 shadow DOM 中的元素

// old
document.querySelector('* /deep/ #select_this');
// or new (probably not yet supported everywhere
document.querySelector('* >>> #select_this');

【讨论】：