Re: [WICG/webcomponents] observedStyles (#856)

AMP team is also very interested in this, although we also have use cases that would benefit from a more generic `StyleObserver` that could be used on any element.

First, AMP has special treatment of `display: none` Custom Elements. If an element isn't displayed, we forbid element from performing any actions (network requests, click handlers on document, etc). Tied to this is a coordination system that we call the Runtime. Runtime is responsible for telling elements when they can perform actions, eg batching together mutations so that we can avoid mutate->measure cycles. Runtime is also interested in determining when an element is `display: none`, so that it can skip the mutations on those elements.

AMP runs as a library that's used on anyone's webpage. The HTML Publisher could be using any number of selectors to set `display: none` on the element, and it's been very difficult for us to automatically detect when one of our elements have their value changed. The best we've been able to do is recommend using the `hidden` attribute to toggle display (which we can detect via `MutationObserver`), but this still requires Publisher's to follow our recommendation. We've seen many publishers that are unaware of our recommendation, and they continue to use things like radio button button and `:selected` selectors to hide tabs, and it's nearly impossible for us to detect these changes. We've fallen back to occasionally doing `getComputedStyle` calls in a loop in order to detect, but this is laggy and not a great solution.

For a more generic observer, AMP is also interested in `position: fixed`/`sticky` elements and their `top`/`bottom` values. AMP runs in a complicated iframe setup with some external UI that appears over the iframe (this comes from the parent page). In order to display the Publisher's `fixed` elements properly, we need to offset the elements by the height of the UI bar. And for the same reasons that `display: none` is difficult to track, it's nearly impossible for us to detect a change in `position` value. Because _any_ element can be position fixed, it's just not practical for us to scan the entire document trying to determine if any elements are now `fixed` position, so just don't try. We can only detect elements that are `position: fixed` (and not `display: none`) when the Runtime loads, and we only check those items in the occasional update pass.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/856#issuecomment-912029676