ResizeObserver 仅在 Web 组件添加到 DOM 时触发，而不是在 Resize 时触发

Question

我已经创建了一个Web组件，并正在尝试向该元素添加ResizeObserver。

ResizeObserver添加到connectedCallback上，该元素似乎仅在添加到 DOM 时触发一次，但在元素调整大小时永远不会再次触发。

我希望当组件被其父元素强制调整大小时，会触发ResizeObserver。我已经检查并观察了开发人员工具中的元素大小，它肯定会调整大小。

我还使用标准 HTML 元素 (id： #foo) 测试了相同的代码，并且回调有效。所以我只能假设问题与影子 DOM 有关。

规范说：

1. 观察将在监视元素从 DOM 中插入/删除时触发
2. 当监视元素显示设置为无时，观察将触发。
对于
3. 未替换的内联元素，不会触发观测值。
4. 观察不会由 CSS 转换触发。
如果正在渲染元素，
5. 并且元素的大小不是 0,0，则观察开始时将触发观察。

我可以确认第 #1 点发生了。

我希望第 #5 点应该发生，但它永远不会发生。如果检查元素，则其大小不是 0,0，并且会随页面调整大小。

我已经浏览了 Web 组件和ResizeObserver以及许多其他网站的 MDN 文档，据我所知，我一切都是正确的。

下面是代码的 JSFiddle： https://jsfiddle.net/h15e48fx/1/

Answer 1

自定义元素样式默认为display: inline。

将其设置为display: block会导致在调整组件大小时触发调整大小观察器。