다른 사용자 정의 요소의 템플리트에서 인스턴스화 될 때 하위 요소를 탐지하지 못하는 사용자 정의 요소

Question

다음과 같이 정의 된 RPG 기본 HTML 요소가 있습니다. 내 index.html 파일의 본문에서 인스턴스화하고 있습니다.

<link rel="import" href="packages/polymer/polymer.html"> 
<link rel="import" href="gridlayout.html"> 
<link rel="import" href="gridtile.html"> 


<polymer-element name="rpg-main" attributes=""> 
    <template> 
    <style> 
     grid-tile { 
     background: #FF00FF; 
     width: 50px; 
     height: 50px  
     } 
    :host { 
     position: absolute; 
     display: block; 
     width: 500px; 
     height: 500px; 
     } 

    </style> 
    <grid-layout rows = "2" cols = "2" spacing = "50px"> 
     <grid-tile> 
     </grid-tile> 
     <grid-tile> 
     </grid-tile> 
     <grid-tile> 
     </grid-tile> 
     <grid-tile> 
     </grid-tile> 
    </grid-layout> 
    </template> 
    <script type="application/dart" src="rpgmain.dart"></script> 
</polymer-element> 

사람이 기대하는 것처럼

는 또한 정의 그리드 레이아웃과 그리드 타일 요소를 가지고있다. 그리드 레이아웃 생성자에서 그 자식을 참조하려고합니다. 그러나 요소는 위의 rpg-main 클래스에서 인스턴스화 될 때 자식이 0이라고 생각합니다.

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

@CustomTag('grid-layout') 
class GridLayout extends PolymerElement { 
    @published int rows; 
    @published int cols; 
    @published int spacing; 

    String _px = "px"; 
    String _perc = "%"; 

    GridLayout.created() : super.created() { 

    print("NUM CHILDREN " + this.children.length.toString()); 

    /** for (int i = 0; i <= this.rows + this.cols - 2; i++) { 
     Element child = this.children[i]; 
     this.children[i].style.margin = this._parseNum(spacing); 
     child.style.float = "right"; 

     if (i % this.rows == this.rows) { 
     child.style.clear = "right"; 
     } 


    }**/ 
    } 
    num _parseString(String s) { 
    print(s.toString()); 
    return num.parse(s.split(_px)[0]); 
    } 

    String _parseNum(num n) { 
    return n.toString() + _px; 
    } 
} 

*** 위의 코드 인쇄 "NUM 어린이 : 0"그것은 단지 내 롤 플레잉 - 주요 요소에서 인스턴스화하는 것을, 그래서 내가 같이 그리드 타일을 인식하지 않을 놀랐어요

어린이. grid-layout 요소가 rpg-main 사용자 정의 요소의 템플리트 태그에서 인스턴스화되기 때문일 수 있습니까? (그래서 그리드 레이아웃은 그 아이들이 '라이트 돔'에 있다고 생각하지 않습니까?) 그것은 수치 스럽습니다. 그렇다면 해결 방법은 무엇입니까?

Answer 1

생성자가 잘못된 위치에 있습니다. 요소를 사용하기 전에 요소를 올바르게 초기화해야합니다.

시도

@override 
void attached() { 
    super.attached(); 
    print("NUM CHILDREN " + this.children.length.toString()); 
} 

이 Justins이 좀 오래되어 대신 다트의 JS 여기에 When is shadowRoot available to a polymer component?