Benutzerdefinierte Elemente können nicht auf den Inhalt von shadowRoot zugreifen.

Question

Ich habe versucht, auf den Inhalt meines benutzerdefinierten Elements in einem anderen benutzerdefinierten Element-Shadow-Stamm zuzugreifen.

index.html hat nur ein my-tag-wrapper Element:

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

my_tag_wrapper.html enthält ein my-tag Element mit einem Absatzelement:

<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 nur machen es ist Inhalt:

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

my_tag.dart wird sein Inhalt auf Konsole aus:

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

jedoch my_tag.dart Druck:

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

Kann ich my-tag Inhalte in über Codes?

Hier ist the example repo.

Edit:

verstand ich dieses Problem mit der von @Günter Zöchbauer's answer versehen Ahnung.

In dem anderen shadowRoot kann der Inhalt der benutzerdefinierten Elemente nicht auf dem created() Konstruktor zugegriffen werden. Der Inhalt ist abrufbar unter attached().

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

ich ein Missverständnis hatte, dass ein Inhalt eines benutzerdefinierten Elements auf created() Konstruktor immer zugänglich ist, weil der Inhalt von my-tag zugänglich auf created() ist, wenn es ein Kind in body Element ist.

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

Answer 1

Da my-tag als content Knoten p ein Kind von my-tag-wrapper.shadowRoot wird.

Sie können es mit Zugriff

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