Javascript 连接时Web组件偏移视线/偏移网络宽度为零

我正试图将我的一个库转换成一个web组件，但我遇到了一个问题，即何时告知组件已布局

Web组件有一个名为

connectedCallback

的回调，它看起来可能是我所需要的，但在回调中检查self时，我的偏移维度都为零：

connectedCallback() {
  console.log(this.offsetWidth, this.offsetHeight);
}

当我对维度查询进行排队时，维度就在那里，因此在连接web组件和到达下一个项目的事件队列之间的某个时间，web组件由浏览器引擎进行布局，获得正确的维度值：

connectedCallback() {
  setTimeout(() => console.log(this.offsetWidth, this.offsetHeight), 0);
}

---

我想知道是否有回调来告诉布局事件何时发生？

我创建了一个没有shadowDOM的简单组件。我在构造函数中编写了以下代码：

this.addEventListener('readystatechange', (evt) => {console.log('readystatechange', evt)});
this.addEventListener('load', (evt) => {console.log('load', evt)});
this.addEventListener('progress', (evt) => {console.log('progress', evt)});
this.addEventListener('DOMContentLoaded', (evt) => {console.log('DOMContentLoaded', evt)});

observer.observe(this, config);

没有输出。因此，这些事件都不会在Web组件上触发

然后，我在组件外部添加了以下代码：

function callback(mutationsList, observer) {
  for(var mutation of mutationsList) {
    if (mutation.type === 'childList') {
      if (mutation.removedNodes.length) {
        console.log(`${mutation.removedNodes.length} child node(s) have been removed.`);
      }

      if (mutation.addedNodes.length) {
        console.log(`${mutation.addedNodes.length} child node(s) have been added.`);
      }
    }
  }
}
var config = { childList: true };
var observer = new MutationObserver(callback);

这一行是给构造器的：

this.addEventListener('readystatechange', (evt) => {console.log('readystatechange', evt)});
this.addEventListener('load', (evt) => {console.log('load', evt)});
this.addEventListener('progress', (evt) => {console.log('progress', evt)});
this.addEventListener('DOMContentLoaded', (evt) => {console.log('DOMContentLoaded', evt)});

observer.observe(this, config);

在我的特定组件上，从未调用我的

回调

我确实有一个不同的组件来更改它的子组件，并且调用了回调

所以，我看不到任何事件，甚至没有在组件完全加载时触发的突变观察者

就我个人而言，我会像您一样使用
setTimeout
，因为这似乎是在组件完成时获得调用的唯一可靠方法。尽管您可能需要指定将设置超时放置在哪里，以确保已完全呈现DOM。
这些值取决于整个DOM，因此需要重新绘制DOM。。
尚未发生的事件

如果每个元素都会触发DOM重绘，我们都会抱怨性能

浏览器决定何时进行DOM重绘（特定于浏览器的逻辑）

在DOM重新绘制之后执行代码的常用方法是设置超时（FUNC，0）

因此严格地说，这并不强制重新绘制DOM，它仍然是浏览器决定何时重新绘制
如果您有一个长期运行的脚本。。。。长时间运行的脚本完成后，FUNC将执行

是的，举办一次活动会很好…
但这需要CPU周期。。。1000个案例中有997个案例不需要这些信息
.. 因此，不存在任何事件

因此，在0,03%需要DOM信息的情况下，您需要执行

setTimeout

请注意，这不是特定于自定义元素的，对于

appendChild

调用，同样适用

如果您有一堆需要此偏移量信息的组件，您可能希望查看一个执行虚拟DOM扩散的框架

更多背景：