Web 组件中的 DOM 个事件 (DOMContentLoaded)

Question

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

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

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

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

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

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

Answer 1

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

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

备注：

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

  IF 你 create/load 你的 Web Component 尽快 同步 （或者在头部定义为脚本）
  你可以赶上DOMContentLoaded事件

  但一般来说，您不应该指望这种行为，因为 user/developer is/should 可以控制 scripts/components 何时加载。

• connectedCallback 在 Web 组件的 opening 标记上触发。如果 Web 组件是 defined early The DOM after 开始标签还没有被解析。
  Lit 和 Hybrids 以及 Stencil 等许多库都提供了方法 like onUpdated 来“帮助”或“防止”您犯 错误 ...您正在学习一种工具，而不是技术。

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

  FireFox 解雇了 connectedCallback late 很长一段时间，他们在 2021 年 3 月修复了它
  详细解释：