ResizeObserver 仅在 Web 组件添加到 DOM 时触发，而不是在调整大小时触发

Question

我已经创建了一个 Web 组件，并尝试将 a 添加ResizeObserver到该元素。

\n

ResizeObserver添加后，connectedCallback它似乎只在元素添加到 DOM 时触发一次，但在元素调整大小时不会再次触发。

\n

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

\n

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

\n

规范说：

\n

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

\n

我可以确认第一点发生了。

\n

我预计第五点应该会发生，但它从来没有发生过。如果检查元素，它的大小不是 0,0 并且会随页面调整大小。

\n

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

\n

这是代码的 JSFiddle：\n https://jsfiddle.net/h15e48fx/1/

\n

Answer 1

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

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