1

In my polymer.dart component I want to access the shadow dom with jquery. In dart I can access f.e. an node´s id like this:

$["testname"].attributes["id"]

or 

shadowRoot.querySelector("#testname").attributes["id"]

How is this done with jquery

context.callMethod(r'$', ['#testname'])["id"]

does not work obviously.

mica
  • 3,898
  • 4
  • 34
  • 62
  • Why would you want to do that? You can query the element in Dart and pass it to jQuery if that is what you want. – Günter Zöchbauer Jan 19 '14 at 14:48
  • the code was just an example. I want to call a query method (for a query extension) on that element – mica Jan 19 '14 at 14:57
  • As you see `webkitShadowRoot` is Chrome specific. If you do this in Dart you make use of the included polyfills automatically and don't have to care about browser differences. In JavaScript you have to take care yourself. – Günter Zöchbauer Jan 19 '14 at 14:59

2 Answers2

2

If you want to access shadow DOM from Dart using jquery, you can do this:

String selector;

JsObject jqueryObject = context.callMethod('\$', ['body /deep/ ${selector}']);

Then you can call jquery methods like this:

jqueryObject.callMethod('click', [myFunc]);

void myFunc(var event) => print('it worked');

In the case of the attribute, you would need to call jquery's attr() method.

String attr = jqueryObject.callMethod('attr', ['id']);

update: So far I have only managed to make this work on chrome for desktop. I believe, other browsers do not support the /deep/ combinator.

David Aroesti
  • 596
  • 4
  • 10
0

you have to use the webkitShadowRoot property like element.webkitShadowRoot.querySelector(...)

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • I have to call the context.callMethod. How can I do this with the webkitShadowRoot – mica Jan 19 '14 at 14:58
  • [http://stackoverflow.com/questions/21218859/how-to-access-shadow-dom-with-jquery-in-js] answers, how to access shadow-dom with JS. Unfortunately I´m not able to reproduce this with dart:js. – mica Jan 19 '14 at 17:01
  • This only works within an PolymerJS Polymer element. This is the quivalent of the `$['elementid']` function insid a PolymerDart Polymer element. – Günter Zöchbauer Jan 19 '14 at 17:04
  • how can I get the corresponding JsObject? – mica Jan 19 '14 at 17:10
  • There is none. This only works if the Polymer element was created using PolymerJS (and probably only when the JS code wasn't minified). A PolymerDart element's code get's some minified mangled name like `x5f` by Dart2js, which is not predictible. You could create a JSCallback that makes this accessible from JavaScript but I can't help you here. It's a while ago that I played with this and the API has changed since. If you could explain your use case a bit more so that I can understand what you try to achieve I may be able to give better advice. Should we start a chat? – Günter Zöchbauer Jan 19 '14 at 17:16