问题描述
在调用模板元素后立即查询嵌入在模板元素中的节点时，聚合物 (2.x) 似乎存在connectedCallback()计时问题。我希望以下示例中this.shadowRoot.querySelectorAll('h1')的第一次调用应返回模板中的所有<h1>节点。 Mozilla Custom Element Doc 指出：
connectedCallback()将元素插入文档(包括插入到影子树中)时调用
据我了解，此时所有模板都应该已经消除。
从代码片段中可以看出，第一个查询返回一个空列表。但是，如果查询延迟，则会返回节点。
我在这里缺少什么吗？
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="polymer/lib/elements/dom-repeat.html">
</head>
<body>
<dom-module id="x-elem">
<template>
<template is="dom-repeat" items="[[testItems]]">
<h1>[[item]]</h1>
</template>
</template>
<script>
class XElem extends Polymer.Element {
static get is() { return 'x-elem' }
static get properties() {
return {
'testItems': {
type: Array,
value: function () {
return [1, 2, 3];
}
}
}
}
ready(){
super.ready();
}
connectedCallback() {
super.connectedCallback();
console.log("Number of nodes after connectedCallback: ", this.shadowRoot.querySelectorAll('h1').length);
var callback = () => {
console.log("Number of nodes after timeout: ", this.shadowRoot.querySelectorAll('h1').length);
}
setTimeout(callback, 100);
}
}
customElements.define(XElem.is, XElem);
</script>
</dom-module>
<x-elem></x-elem>
</body>
</html>connectedCallback并不意味着元素已被呈现。您可以使用Polymer.RenderStatus.afterNextRender
connectedCallback() {
super.connectedCallback();
Polymer.RenderStatus.afterNextRender(this, () => {
console.log('Number of nodes after connectedCallback: ', this.shadowRoot.querySelectorAll('h1').length);
});
}
演示