javascript - Web 组件 offsetHeight/offsetWidth 连接时为零

Question

我正在尝试将我的一个库转换为一个 Web 组件，但我遇到了一个问题，即何时告知该组件已经布局。

Web Components 有一个名为 connectedCallback 的回调，看起来它可能是我需要的，但是在回调中检查 self 时，我的偏移维度都是零:

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

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

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

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

Answer 1

我创建了一个没有 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)});

没有输出。因此，这些事件都不会在 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);

构造函数的这一行:

observer.observe(this, config);

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

我确实有一个不同的组件可以更改其子组件并调用回调。

因此，我没有看到任何事件，甚至没有看到组件完全加载时触发的突变观察器。

就我个人而言，我会像您一样使用 setTimeout，因为这似乎是组件完成后获得调用的唯一可靠方式。尽管您可能必须具体说明将 setTimeout 放在哪里以确保已完全呈现 DOM。