Web组件中ResizeObserver仅在DOM插入时触发，resize时未触发

问题根源 #

自定义Web组件默认的display属性是inline，属于非替换行内元素——根据ResizeObserver规范第3条，这类元素的尺寸变动不会触发监听回调。而你测试的标准HTML元素（比如div）默认是block级，自然能正常触发。

修复方案 #

给自定义组件设置块级或行内块级的display属性即可：

1. 通过全局CSS设置：

my-component {
  display: block; /* 或 inline-block */
}

2. 或在组件的connectedCallback内直接设置：

connectedCallback() {
  this.style.display = 'block';
  // 初始化ResizeObserver的原有代码
  const observer = new ResizeObserver(entries => {
    // 你的回调逻辑
  });
  observer.observe(this);
}

原理说明 #

将组件改为块级元素后，它的尺寸变化会被ResizeObserver正确识别，父元素强制resize时，组件的尺寸变动会触发监听回调，符合你预期的行为。

内容的提问来源于stack exchange，提问作者leoplaw