부모 요소의 하위 요소에 액세스하는 방법

Question

부모 요소에 버튼이있는 요소를 만듭니다. 이 버튼을 탭하면 하위 요소의 속성이 변경됩니다. 다음은 코드 스 니펫입니다.

<parent-element> 
    <template is="dom-repeat" items="{{aa}}"> 
    <child-element id="aa{{index}}"> 
    <button on-tap="_clickFunction"> 
    </template> 

_ClickFunction(){ 
      for(var i = 0; i < items.length; i++){   
       this.shadowRoot.querySelector("aa" + i).prop1 = true; 
       this.shadowRoot.querySelector("aa" + i).prop2 = true; 
      } 
} 
</parent-element> 


<child-element> 
    properties:{ 
     prop1: Boolean, 
     prop2: Boolean, 
} 
</child-element> 

id 또는 dom 조작을 사용하지 않으면 어떻게 가능합니까? dom-repeat가 있으면 특정 하위 요소의 속성에 액세스하는 방법입니다.

Answer 1

이 시도 :

_ClickFunction(e){ 
    let childItemIndex = e.model.index; 
    var childItem = this.shadowRoot.getElementById(`aa${childItemIndex}`); 
    item.prop1 = !!1; 
    item.prop2 = !!1; 
}