कस्टम तत्व shadowRoot

Question

में इसकी सामग्री तक नहीं पहुंच सकते हैं मैंने अपने कस्टम तत्व की सामग्री को किसी अन्य कस्टम elemnent छाया रूट में एक्सेस करने का प्रयास किया।

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

0123:

<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 बस सामग्री है प्रस्तुत करना:

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

my_tag_wrapper.html किसी अनुच्छेद तत्व के साथ एक my-tag तत्व शामिल हैं:

index.html सिर्फ एक my-tag-wrapper तत्व है

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 द्वारा प्रदान सुराग के साथ इस समस्या को समझा।

अन्य शैडो रूट में, कस्टम तत्वों की सामग्री 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 तत्व में एक बच्चा है।

संपादित करें: the @Günter Zöchbauer's advice

Answer 1

क्योंकि my-tagcontent एक के रूप में नोड pmy-tag-wrapper.shadowRoot की संतान बन जाता द्वारा s/domReady/attached।

आप

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