自定義元素無法訪問它在shadow中的內容

Question

我試圖訪問另一個自定義elemnent shadow根中的自定義元素的內容。

index.html只是有一個my-tag-wrapper元素：

<!-- import HTMLs and init Polymer--> 
... 
<my-tag-wrapper></my-tag-wrapper> 
... 

my_tag_wrapper.html包含一個段落元素的my-tag元素：

<polymer-element name="my-tag-wrapper" > 
    <template> 
    <my-tag> 
     <p>wrapped my-tag contents</p> 
    </my-tag> 
    </template> 
    <script type="application/dart" src="my_tag_wrapper.dart"></script> 
</polymer-element> 

my_tag.html只呈現它的內容：

<polymer-element name="my-tag" > 
    <template> 
    <content></content> 
    </template> 
    <script type="application/dart" src="my_tag.dart"></script> 
</polymer-element> 

my_tag.dart將打印它的內容到控制檯：

@CustomTag('my-tag') 
class MyTagElement extends PolymerElement { 
    ParagraphElement get p => this.querySelector('p'); 

    MyTagElement.created() : super.created() { 
    var pe = p; 
    var t = (pe == null) ? null : pe.text; 
    print('my-tag p: ${t}'); 
    print('my-tag outerHtml: ${outerHtml}'); 
    } 
} 

然而，my_tag.dart打印：

my-tag p: null 
my-tag outerHtml: <my-tag></my-tag> 

我可以知道my-tag內容在上面的代碼？

這裏是the example repo。

編輯：

我明白這個問題，由@Günter Zöchbauer's answer提供的線索。

在其他shadowRoot中，自定義元素的內容無法在created()的構造函數上訪問。內容可在attached()之後訪問。

我固定my_tag.dart：

@CustomTag('my-tag') 
class MyTagElement extends PolymerElement { 
    ParagraphElement get p => this.querySelector('p'); 

    MyTagElement.created() : super.created() { 
    _printContent(); // print null because contents is not rendered 
    } 

    @override 
    attached() { 
    super.attached(); 
    _printContent(); // print contents 
    } 

    _printContent() { 
    var pe = p; 
    var t = (pe == null) ? null : pe.text; 
    print('my-tag p: ${t}'); 
    print('my-tag outerHtml: ${outerHtml}'); 
    } 
} 

我有一個誤區，認爲自定義元素的內容始終是created()構造訪問，因爲my-tag內容是created()訪問時，它是在body元素的孩子。

編輯：s/domReady/attached通過the @Günter Zöchbauer's advice

Answer 1

因爲my-tag爲content節點p成爲my-tag-wrapper.shadowRoot一個孩子。

可以使用

(shadowRoot.querySelector('content') as ContentElement).getDistributedNodes()[0];