Web 组件中的 DOM 事件 (DOMContentLoaded)

Question

我创建了一个本机 Web 组件 (HTMLElement)，并使用它来公开一个现有的组件（小写“c”），它是一个由 HTML/CSS/JS 组成的片段......基本上将它包装在 Web 中帮助其重用并将其与网页的其余部分隔离的组件。

问题是我包含在我的 Web 组件中的组件有一些 JavaScript 来延迟加载图像，它列出了 DOMContentLoaded 文档事件以触发其操作 DOM 的一些 JS（注入正确的 @987654322 @标签）..

我能够将所有内容放入我的 Web 组件中，并在 shadowRoot（使用 mode: open）内执行组件的 JS，但是永远不会调用 DOMContentLoaded 上的组件事件侦听器。

我尝试在 constructor() 和 connectedCallback() 中编写我的 Web 组件中的所有内容，但它们的行为相同。

1. Web 组件/ShadowDOM 是否有自己的 DOMContentLoaded 事件？和/或它是否尊重父 DOM 的“状态”？
2. 如果我在为document... 绑定事件侦听器的 Web 组件上下文中执行 JS，该事件侦听器是否仅适用于 ShadowDOM？还是实际上绑定到父 DOM？

更新：我正在异步加载我的 Web 组件 - 所以它是在父级的自然 DOMContentLoaded 事件触发后加载的。

Answer 1

1. 不，Web 组件没有 DOMContentLoaded 事件。
   connectedCallback 在 Web 组件被注入（连接）到 DOM 时触发。

2. 是的，您可以在 DOM 中的任何位置绑定事件并可以访问 DOM 中的所有内容
   （使用 shadowDOM 时，这是与 IFrame 的主要区别之一。它无法访问其“容器”）

注意事项：

• 根据您的描述，听起来DOMContentLoaded 已经过去了；因此我假设您正在定义 Web 组件 late（您是否正在加载脚本 async？）

  如果您尽快同步创建/加载您的 Web 组件（或在头部定义为脚本）
  你可以赶上DOMContentLoaded事件

  但一般而言，您不应该指望这种行为，因为用户/开发人员应该/应该控制脚本/组件的加载时间。

• connectedCallback 在您的 Web 组件的 opening 标记上触发。如果 Web 组件 定义 early DOM after 开始标签不会已经被解析了。
  许多库，如 Lit 和 Hybrids 和 Stencil 提供了 like onUpdated 的方法，“帮助”或“防止”你犯错误 ...你正在学习一个工具，不是技术。

  在 vanilla JS 中，您必须自己创建该行为；通过在 connectedCallback 中添加 0ms setTimeOut 轻松完成。这实际上是等到 EventLoop 为空并在解析所有 DOM 时触发。

  FireFox 解雇了 connectedCallbacklate 很长一段时间，他们在 2021 年 3 月修复了它
  长解释：wait for Element Upgrade in connectedCallback: FireFox and Chromium differences