다트 (Dart)의 형제 (Sibling) 폴리머 요소를 참조하십시오.

Question

지난 몇 시간 동안 나는 내 Polymer 프로젝트 내의 형제 요소를 언급하는 데 어려움을 겪었습니다.

/* main.html */ 
<link rel="import" href="siblingA.html"> 
<link rel="import" href="siblingB.html"> 

<polymer-element name="app-main"> 
    <template> 
     <app-siblingA></app-siblingA> 
     <app-siblingB></app-siblingB> 
    </template> 
    <script type="application/dart" src="main.dart"></script> 
</polymer-element> 

/* siblingA.html, nothing special about it */ 
<polymer-element name="app-siblingA"> 
    <template> 
     <button on-click="{{doSomething))">Do something</button> 
    </template> 
    <script type="application/dart" src="siblingA.dart"></script> 
</polymer-element> 

/* siblingA.dart */ 
import 'package:polymer/polymer.dart'; 
import 'dart:html'; 

@CustomTag('app-siblingA') 
class SiblingA extends PolymerElement { 
    bool get applyAuthorStyles => true; 

    SiblingA.created() : super.created() { 
    } 

    void doSomething(MouseEvent e, var detail, Node target) { 
    var profile = document.querySelector('app-siblingB'); 
    print(profile); // This is always null, why? 
    } 
} 

가 지금은 문서에서 내 app-main 노드를 얻을 수 있지만, 형제 요소를 얻기에 실패 다음 설치를 상상해보십시오. 성공하지 않고 shadowRoot을 통해 형제 요소를 가져 오려고했습니다.

형제 요소를 얻을 수있는 방법이 경우 app-siblingBdocument 또는 shadowRoot?

Answer 1

형제는 <app-main>의 그림자 안에 있습니다. document.querySelector()은 요소의 그림자 DOM에 도달하지 않습니다.

이

(parentNode as ShadowRoot).querySelector('app-siblingB');