connectedCallback 中的点亮元素 getElementById 返回 null

如何解决connectedCallback 中的点亮元素 getElementById 返回 null

我记得很多 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 在这里不起作用？

解决方法

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 每次在 DOM 中移动元素时都会运行

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

LitElement 生命周期回调是糖，它们“保护”您免受（强大的）裸机 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
  });
}

有关血腥回调的详细信息，请参阅：wait for Element Upgrade in connectedCallback: FireFox and Chromium differences