与 connectedCallback 相关的模板冲压时间

Question

问题描述

在调用 connectedCallback() 后立即查询模板元素中嵌入的节点时，Polymer (2.x) 似乎存在计时问题。我希望下面示例中 this.shadowRoot.querySelectorAll('h1') 的第一次调用应该 return 模板中的所有 <h1> 节点。 Mozilla Custom Element Doc 状态：

connectedCallback()

Called when the element is inserted into a document, including into a shadow tree

据我了解，此时所有模板都应该已经被淘汰了。

如代码片段所示，第一个查询 return 是一个空列表。但是，如果查询延迟，节点将被 returned。

这里有什么我遗漏的吗？

示例代码

<!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>

Answer 1

connectedCallback 并不表示该元素已被渲染。您可以为此使用 Polymer.RenderStatus.afterNextRender：

connectedCallback() {
  super.connectedCallback();
  Polymer.RenderStatus.afterNextRender(this, () => {
    console.log('Number of nodes after connectedCallback: ', this.shadowRoot.querySelectorAll('h1').length);
  });
}

demo

与 connectedCallback 相关的模板冲压时间

Timing of template stamping in relation to connectedCallback

html

javascript

polymer

polymer-2.x