Question

我试图从聚合物飞镖类中获得外部HTML（index.html）div的引用。我知道我可以通过以下代码查询app_element.html＆＃39; div的参考：

shadowRoot.querySelector('#select_this')

但是，如果我要获得index.html＆＃39; 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>

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

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

1 个答案: