How to access shadow dow with jquery in a polymer.dart component

Question

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.

Answer 1

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.

Answer 2

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