自定义元素无法访问shadowRoot中的内容

Question

我尝试在另一个自定义elemnent阴影根中访问我的自定义元素的内容。

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

编辑：{{1}}

Answer 1

由于my-tag作为content节点p成为my-tag-wrapper.shadowRoot的孩子。

您可以使用

访问它

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