dart - 自定义元素无法访问它在 shadowRoot 中的内容

Question

我试图在另一个自定义元素阴影根中访问我的自定义元素的内容。
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

Answer 1

因为 my-tag作为 content节点p成为my-tag-wrapper.shadowRoot的 child .

您可以使用它访问它

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