使用NG2 Native View Encapsulation时，如何访问shadow-dom内的ElementRef

Question

I have the following plunker

The problem I am having is when I turn on native view encapsulation I can no longer access the internal DOM (by design). My question is, does Angular 2 provide a way to access the DOM INSIDE the shadow dom from the component.

// Shows 1  
platformBrowserDynamic().bootstrapModule(AppModule)
// Shows 0
// platformBrowserDynamic().bootstrapModule(AppModule, {defaultEncapsulation: ViewEncapsulation.Native}) 

Answer 1

There is nothing to do with Angular2. You can use shadowRoot property to search elements inside of Shadow DOM.

const shadowRoot: DocumentFragment = this.element.nativeElement.shadowRoot;
this.count = shadowRoot.children.length;

Or use ViewChild/ViewChildren ContentChild/ContentChildren to get reference to ElementRef