ResizeObserver not triggered for display change in web component

[dbatiste]

The ResizeObserver polyfill does not invoke callbacks for observers of elements inside of web components when display attribute changes. I've reproduced this in Safari and FF, with a small demo of the behavior that simply toggles the display: none;/ display: inline-block;. Steps to reproduce (in the demo):

1. click the toggle button for the native case (observing simple div) - observe that the div is displayed, and that a message is written to the console from the observer callback

2. click the toggle button for the web component case - observe that the element is displayed, but a message is not written to the console from the observer callback when using Firefox or Safari. This works as expected for Chrome.

Interesting observation - if the toggle button for the web component is clicked first, and then the native toggle is clicked second, both callback messages appear.

[mpharoah-d2l]

The issue stems from the fact that MutationObserver will only watch child elements when subtree: true is specified, but elements in the shadow root of an element are not considered children, and so changes here will not be detected by mutation observers (unless the shady DOM polyfill is being used).

We were able to solve this by recursively building a tree of web components (elements having a shadowRoot) for the page, and keeping it updated as components are added and removed. We attach a MutationObserver to the shadowRoot of every component, allowing changes from within web components to be observed.