connectedCallback 中的 lit-element getElementById returns 空

Question

我记得很多 Web 组件教程都说 connectedCallback 适用于连接 DOM 事件或获取一些 DOM 元素（如 this one）。但是我无法在 lit-element:

中获得运行的简单程序

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
  render() {
    return html`<p id="root">template content</p>`;
  }

  connectedCallback() {
    super.connectedCallback();
    this.shadowRoot.getElementById('root'); // null
  }

  firstUpdated() {
    this.shadowRoot.getElementById('root'); // not null
  }
}

看起来它只适用于 firstUpdated，firstUpdate 不会在第一次渲染后触发吗？如果我需要在第一次渲染之前设置一些事件怎么办？为什么 connectedCallback 在这里不起作用？

Answer 1

connectedCallback 按照规范工作，只是不符合您的预期。

这些回调在不同的时间触发

<my-element myattribute="foo">   1. -> connectedCallback
  <p id="root">
    template content
  </p>
</my-element>  2. -> firstUpdated (LitElement)

1. -> connectedCallback表示Element注入在DOM中。但是它的子还没有解析。

除非您使用 FireFox（2021 年之前的版本！！），它在 2 时触发 connectedCallback 太晚了。 (confirmed bug)

将元素想象成水管； connect 表示软管连接到水龙头，而不是水流过它。因此，您可以在 connectedCallback

中访问数据属性（软管的属性）

这就是 connectedCallback 在这个 1. -> 时刻触发的原因...您可能需要基于其属性的内容。而且您不想等待所有内容都被解析（这可能是一个非常非常大的 DOM 树）

还要注意 connectedCallback 运行s 每次您在 DOM

中移动元素

如果你深入研究，你还会注意到 attributeChangedCallback 可以运行在 connectedCallback

LitElement 生命周期回调是 sugar，它们 'safeguard' 你反对（强大的）裸机 Web 组件行为。

所以没有 LitElement，你可以这样做：

connectedCallback(){
  // 1. -> do stuff
  setTimeout(() => { // no trickery, just wait till that dreaded JS Event Loop is done
    // all children are parsed
    // 2. -> do stuff
  });
}

有关血腥回调的详细信息，请参阅：

connectedCallback 中的 lit-element getElementById returns 空

lit-element getElementById in connectedCallback returns null

web-component

lit-element

lit-html