connectedCallback 中的 lit-element getElementById 返回 null答案

【问题标题】：lit-element getElementById in connectedCallback returns nullconnectedCallback 中的 lit-element getElementById 返回 null
【发布时间】：2021-02-21 14:05:46
【问题描述】：

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

【问题讨论】：

标签： web-component lit-element lit-html

【解决方案1】：

connectedCallback 按照规范工作，只是没有达到您的预期。

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

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

1. -> connectedCallback 表示元素被注入到 DOM 中。但它的孩子还没有被解析。

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

将元素视为水管；连接表示软管连接到水龙头，而不是水流过它。所以你可以在connectedCallback中访问数据属性（软管的一个属性）

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

另请注意connectedCallback 每次您在 DOM 中移动元素时都会运行

如果您深入了解，您还会注意到attributeChangedCallback 可以在connectedCallback

之前运行

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

【讨论】：