web-component - connectedCallback 中的 lit-element getElementById 返回 null

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 表示元素被注入(inject)到 DOM 中。 但它的子级还尚未被解析。

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

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

中访问数据属性(软管的属性)

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

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

如果您深入研究，您还会注意到，如果您的元素上有observerAttributes，attributeChangedCallback 会在connectedCallback 之前运行。

LitElement 生命周期回调是糖，它们“保护”您免受(强大的)裸机 Web 组件行为的影响。

因此，如果没有 LitElement，您可以执行以下操作:

connectedCallback(){
  // 1. -> do stuff
  setTimeout(() => {//no tricks, 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