2

So, I'm trying to select a polymer custom element(using paper_elements) in my view with querySelector. I'm able to select regular html elements just fine. In particular, I'm trying to select a specific paper-input element. I want to be able to query it's input element which is buried in it's second shadowroot.

I've tried the following:

querySelector('#my-paper-input::shadow #input')
querySelector('paper-input::shadow input')

and a bunch of other variations. However, no matter what I do, the query always returns null. It's driving me mad because I can style it in css. What do?

Marc Byfield
  • 510
  • 4
  • 14

1 Answers1

1

As far as I know you have to use several steps

querySelector('#my-paper-input').shadowRoot.querySelector('input');

but you should also be able to access the value using the attribute of the outer element like

querySelector('#my-paper-input').attributes['value'] or
querySelector('#my-paper-input').attributes['inputValue']

you could also use http://pub.dartlang.org/packages/angular_node_bind
but I wasn't able using Angular with paper-elements recently (see https://github.com/angular/angular.dart/issues/1227)

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • No dice, I cannot even select the paper-input. >.> I'm trying to run the querySelector in the controller for the view – Marc Byfield Jul 16 '14 at 19:59
  • When you add an constructor parameter of type `Element` you get the view element passed in then you can call `querySelector` on the View. If the view is a normal Angular component it itself has a shadowDOM. The view component needs to implement ShadowRootAware do your query inside the `onShadowRoot` method. This is when the component is fully initialized. You also have to ensure that Polymer is fully initialized otherwise the shadowRoot won't be accessible. – Günter Zöchbauer Jul 16 '14 at 20:03
  • Thanks, can I see an example? – Marc Byfield Jul 16 '14 at 20:08
  • What about you posting more code and I fix what I thing should be changed? ;-) I forgot to post this link http://stackoverflow.com/questions/24550516 (ShadowRootAware). Here is my attempt to use paper-elements and Polymer.dart https://github.com/zoechi/so_question_24723315 – Günter Zöchbauer Jul 16 '14 at 20:11
  • I've created a [repo](https://github.com/windlessuser/so-question-24788402) with the relevant parts of my code. There are quite a few issues. You can ignore the commute Map class for now it's being reworked to be more angular like. My main concern is the commute controller class. That's where I want to be able to query polymer elements. Also when compiled to js, the ng-view doesn't work. Thanks much! – Marc Byfield Jul 16 '14 at 20:49
  • I was already midnight here and I went to bed ... I tried to run your example but I run again into this issue https://github.com/angular/angular.dart/issues/1227 and I'm therefore not able to launch your app. It seems you didn't have this problem. What Dart version are you using and on what OS? I made two comments in your repo but they don't apply here. Your `pubspec.yaml` dependencies contain the deprecated `shadow_dom` package but you haven't included the script in your `index.html` anyway. Otherwise your initialization code looks fine (I got warnings though in `main.dart` line 24 and 25 – Günter Zöchbauer Jul 17 '14 at 06:32
  • I'm on Elementary OS. I've been switching between Dart 1.5.3 Stable and 1.6.0-dev, both are giving me the same problem. I can't query the paper-input element and ng-view wont work run under pub serve even though it works in dartium. – Marc Byfield Jul 17 '14 at 13:04
  • I can't help you because I can't reproduce your problem because I run into another problem before I reach the state where your problem occurs. – Günter Zöchbauer Jul 17 '14 at 14:33
  • It works in dartium, but not when you compile it to js. Is that what you mean? – Marc Byfield Jul 18 '14 at 04:04
  • I can't launch it even in Dartium. – Günter Zöchbauer Jul 18 '14 at 04:22
  • The answer to [this question](http://stackoverflow.com/questions/24724848/debuging-angular-and-polymer-dart) solved my problem not being able to launch your app. I'll add feedback when I know more. – Günter Zöchbauer Jul 20 '14 at 15:01