How to reference a polymer component from inside an Angular.Dart component

Question

I'm hoping someone can steer me on the right direction. I embedded a polymer component inside an Angular component. I would like to call a method from this polymer component from the angular component class. Is this possible, if yes how would you go about doing this? querySelector has not proven successful.
ang_comp.html:

<div id='ilovePolymer'>
    <bwu-grid id='polymerGrid'></bwu-grid>
</div>

ang_comp.dart:

@Component(selector: 'ang-comp', templateUrl:'ang_comp.html')
class AngularComp {
    ......//All the goodness
    querySelector('#ilovePolymer')  returns me null here.  
    querySelector('ang-comp').shadowRoot returns nothing  
    querySelector('bwu-grid') returns nothing.  

I'm using Angular 1.0.0, Polymer 0.15.1+5

Answer 1

Thank you Ozan. That was a good suggestion, here is how I fixed it:

• Make sure you add useShadowDom: true to the component properties.
• The Angular component class implements shadowRootAware
• override onShadowRoot with the @override meta.

My example class:

@Component(selector: 'ang-comp', templateUrl:'ang_comp.html', useShadowRoot: true) class AngularComp implements ShadowRootAware {
... //some other stuff...
@override
onShadowRoot(ShadowRoot sr){

print(sr.querySelector('#polymerGrid') is bwu-grid); //This returns True! Yey!!

}
}

By the way, your could also use AttachAware if you want to capture something during attach.