ResizeObserver only firing when web component added to the DOM and not on Resize

Question

I've created a web component and am attempting to add a ResizeObserver to the element.

ResizeObserver is added on connectedCallback which appears to fire only once upon the element being added to the DOM, but never again when the element resizes.

I would expect that the ResizeObserver would be fired when the component is forced to resize by it's parent element. I've checked and watched the element size in the developer tools, and it definitely resizes.

I have also tested the same code with standard HTML element (id: #foo) and the callback works. So I can only assume the problem is related to the shadow DOM.

the specification says:

1. Observation will fire when watched Element is inserted/removed from DOM
2. Observation will fire when watched Element display gets set to none.
3. Observations do not fire for non-replaced inline Elements.
4. Observations will not be triggered by CSS transforms.
5. Observation will fire when observation starts if Element is being rendered, and Element’s size is not 0,0.

I can confirm that point #1 happens.

I expect that point #5 should happen, but it never does. If Inspect the element, it's size is not 0,0 and does resize with the page.

I've gone over the MDN documentation for web components and ResizeObserver and a number of other websites and as far as I understand, I have everything correct.

Here is a JSFiddle of the code: https://jsfiddle.net/h15e48fx/1/

Answer 1

The custom element style defaultes to display: inline.

Setting it to display: block causes the ResizeObserver to fire when the component resizes.