Gli elementi personalizzati non possono accedere ai contenuti in shadowRoot

Question

Ho tentato di accedere ai contenuti del mio elemento personalizzato in un'altra radice shadow elemnent personalizzata.

index.html deve solo un elemento my-tag-wrapper:

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

my_tag_wrapper.html contiene un elemento my-tag con un elemento paragrafo:

<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 solo rendono il suo contenuto:

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

my_tag.dart stamperà il suo contenuto per console:

@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}'); 
    } 
} 

Tuttavia, my_tag.dart stampa:

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

Posso ottenere my-tag contenuti nei codici di cui sopra?

Qui è the example repo.

Edit:

ho capito questo problema con l'indizio fornito da @Günter Zöchbauer's answer.

Nell'altro shadowRoot, il contenuto degli elementi personalizzati non può essere accessibile sul costruttore created(). Il contenuto è accessibile su e dopo attached().

mi fisso 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}'); 
    } 
} 

ho avuto un malinteso che un contenuto di un elemento personalizzato è sempre accessibile sul created() costruttore, perché il contenuto del my-tag è accessibile a created() quando si tratta di un bambino in body elemento.

Edit: s/domReady/attached da the @Günter Zöchbauer's advice

Answer 1

Perché my-tag come content nodo p diventa figlio di my-tag-wrapper.shadowRoot.

È possibile accedervi utilizzando

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