Dart - Referencing outer HTML div using querySelector from Polymer class

0
votes

I'm trying to get a reference of outer HTML(index.html)'s div from the polymer dart class. I know I can query the reference of app_element.html's div by the following code:

shadowRoot.querySelector('#select_this')

However, if I were to get a reference of index.html's div (#select_this), how can I do that from app_element.dart class? Is this even possible? If not, how can I design the polymer elements so that it can access DOM of other HTML pages and not only the ones that bind that particular polymer element?

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>
1
htmldartpolymerdart-polymer

1 Answers

0
votes

Use the documents querySelector instead:

import 'dart:html';

...

document.querySelector('#select_this');

You can get access to elements within other elements shadow DOM 

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