Allow dynamically changing rootMargin

[zcorpan]

In whatwg/html#5510 I'm trying to specify <img loading=lazy> in terms of IntersectionObserver as per discussion in whatwg/html#5236

The desired behavior for lazy-loading is to dynamically change the rootMargin in response to things like scrolling and network changes. See https://github.com/whatwg/html/issues/5408#issuecomment-623683336

Since IntersectionObserver only allows setting the rootMargin upon initialization, this would require one of

• Register a new IntersectionObserver and observe all the same elements as the old one, and get rid of the old one. This seems bad, but I assume is what a JS polyfill would have to do?
• Have the browser internally update the rootMargin even though the public API doesn't allow for it.

I think the second option seems better, but per the extensible web manifesto we try to have web features be explained by lower-level APIs without having special magic that isn't accessible to web developers.

Are there issues with modifying the rootMargin after initialization?

[domfarolino]

This seems reasonable, but also I don't think it should block https://github.com/whatwg/html/pull/5510

[zcorpan]

Agreed. I think it doesn't need to block fixing https://github.com/whatwg/html/issues/5408 either, we could temporarily violate the extensible web manifesto here. But fixing this first certainly seems nicer to me!

[emilio]

I don't think there'd be an issue allowing this.

[zcorpan]

There will be a TPAC breakout session tomorrow (30 October 14:00–15:00 UTC) to discuss this issue.

https://www.w3.org/2020/10/TPAC/breakout-schedule.html#intersectionobserver

[zcorpan]

The breakout starts in ~20 minutes. Agenda and meeting notes here: https://docs.google.com/document/d/1SXwbMiwOUkLPXSM_klk4q9mFEanbIH8IAgTM80cCMXU/edit?usp=sharing

[asakusuma]

@zcorpan I read the meeting notes, has someone proposed an API here to allow rootMargin mutation?

Another use case here is top navbars that change size.

[zcorpan]

@asakusuma The API we gravitated towards was to allow assigning to rootMargin (and @smfr suggested also allow changing thresholds for symmetry).

In https://github.com/metonym/svelte-intersection-observer/pull/12#issuecomment-805164642 @dysfunc also explains a use case for this feature. The implementation in svelte-intersection-observer validates that there is a web developer need for this feature.

cc @chrishtr

[zcorpan]

PRs: https://github.com/w3c/IntersectionObserver/pull/485 (thresholds), https://github.com/w3c/IntersectionObserver/pull/486 (rootMargin)