我试图在另一个自定义elemnent阴影根中访问我的自定义元素的内容.
index.html
只是有一个my-tag-wrapper
元素:
<!-- import HTMLs and init Polymer-->
...
<my-tag-wrapper></my-tag-wrapper>
...
Run Code Online (Sandbox Code Playgroud)
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>
Run Code Online (Sandbox Code Playgroud)
my_tag.html
只是渲染它的内容:
<polymer-element name="my-tag" >
<template>
<content></content>
</template>
<script type="application/dart" src="my_tag.dart"></script>
</polymer-element>
Run Code Online (Sandbox Code Playgroud)
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}');
}
}
Run Code Online (Sandbox Code Playgroud)
但是,my_tag.dart
打印:
my-tag p: null
my-tag outerHtml: <my-tag></my-tag>
Run Code Online (Sandbox Code Playgroud)
我可以获得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}');
}
}
Run Code Online (Sandbox Code Playgroud)
我误解了created()
构造函数始终可以访问自定义元素的内容,因为当元素是元素时,my-tag
可以访问内容.created()
body
编辑:s/domReady/attached
通过该@君特Zöchbauer的建议
因为my-tag
作为一个content
节点p
成为 的子节点my-tag-wrapper.shadowRoot
。
您可以使用以下方式访问它
(shadowRoot.querySelector('content') as ContentElement).getDistributedNodes()[0];
Run Code Online (Sandbox Code Playgroud)