Question

问题说明

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

connectedCallback()

元素插入文档时调用，包括插入阴影树

根据我的理解，此时所有模板都应该已经标记出来了。

从代码片段中可以看出，第一个查询返回一个空列表。但是，如果查询延迟，则返回节点。

这里有什么我想念的吗？

示例代码

＆＃13;

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

＆＃13;

Answer 1

connectedCallback并不意味着元素已被渲染。您可以使用$unwind：

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

Polymer.RenderStatus.afterNextRender

与connectedCallback相关的模板标记的时间

1 个答案: