Сроки штамповки шаблона по отношению к connectedCallback

описание проблемы

Кажется, есть проблема синхронизации с Polymer (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>

Источник

1 ответ

Решение

connectedCallback не подразумевает, что элемент был представлен. Вы могли бы использовать Polymer.RenderStatus.afterNextRender для этого:

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

демонстрация

Источник
Другие вопросы по тегам