提问人：Deane 提问时间：10/29/2023 更新时间：10/30/2023 访问量：38
如何将 Web 组件代码连接到 DOM 的最终确定？
How do I connect web component code to the finalization of the DOM?
问：
如何延迟 Web 组件中代码的执行，直到整个文档加载并准备就绪？
我的 Web 组件需要与自身外部的元素进行交互——它将查询元素的标签，这些元素通常会按文档顺序出现在 Web 组件之后。因此，Web 组件将首先添加到 DOM 中。body
果然，在 中，我找不到其他元素，我猜是因为它们还没有被添加到 DOM 中。如果我将我的 Web 组件移动到页面的较低位置，它会发现它们很好（可能是因为它们是在 Web 组件之前添加的）。connectedCallback
我尝试了传统的方法，但问题是在里面，现在引用的是 HTML 文档，而不是我的 Web 组件。所以我在 Web 组件的“外部”执行代码，这不是我想要的。document.addEventListener('DOMContentLoaded', myFunction)myFunctionthis
如何在 Web 组件的上下文中执行某些操作并执行代码？或者，无论我的 Web 组件位于页面上的哪个位置，我该如何推迟执行，直到整个 DOM 都填充完毕？DOMContentLoaded
答：
0赞
This Guy
10/30/2023
#1
在 connectedCallback 中添加事件侦听器，或者，你“可以”使用 setTimout（ （）=>myfunction， 5000 ） 等待 5 秒后再运行。“Hacky”，但应该有效。
class MyCustomWebComponent extends HTMLElement {
constructor() {
super();
}
myFunction(e) {
// do the thing with the body elements
}
connectedCallback() {
document.addEventListener('DOMContentLoaded', (e) => myFunction(e);) // using anonymous function will bind 'this' properly to myFunction
}
}
评论
document.addEventListener('DOMContentLoaded', () => myFunction())或document.addEventListener('DOMContentLoaded', myFunction.bind(thecomponent))<script defer src="...">.bind(this)