如何将 Web 组件代码连接到 DOM 的最终确定？

Question

如何延迟执行 Web 组件内的代码，直到整个文档加载并准备就绪？

我的 Web 组件需要与自身外部的元素进行交互 - 它将查询

body

标签中的元素，而这些元素通常会按文档顺序出现在 Web 组件之后之后。因此，Web 组件将首先添加到 DOM 中。

果然，在

connectedCallback

 中，找不到任何其他元素，我想是因为它们还没有添加到 DOM 中。如果我将 Web 组件移到页面下方，它会发现它们很好（大概是因为它们是在 Web 组件之前添加的）。

我尝试了

document.addEventListener('DOMContentLoaded', myFunction)

的传统方法，但问题是在

myFunction

内部，

this

现在引用了HTML文档，而不是我的Web组件。所以我在 Web 组件“外部”执行代码，这不是我想要的。

如何在

DOMContentLoaded

 上执行某些操作并在 Web 组件的上下文中执行代码？或者，无论我的 Web 组件位于页面上的哪个位置，我怎样才能推迟执行，直到填充整个 DOM？
    

Answer 1

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
  }
}

https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event