自定义元素无法访问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带有paragraph元素的元素:

<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上述代码中的内容吗？

这是示例回购.

编辑:

我用@GünterZöchbauer的答案提供的线索理解了这个问题.

在另一个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通过该@君特Zöchbauer的建议

Answer 1

因为my-tag作为一个content节点p成为 的子节点my-tag-wrapper.shadowRoot。

您可以使用以下方式访问它

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