support dynamically changing the rootMargin

[dysfunc]

Allows for updating rootMargin after init to accommodate scrolling, zooming, network, etc. changes.

There's a discussion happening around this currently with the W3C IO Spec. It sounds like it will eventually be supported, but is not something currently provided.

w3c/IntersectionObserver#428

Thoughts?

[metonym]

What's your use case? Can you provide some code?

[dysfunc]

Scenario:

• I have a container element that has N child nodes.
• Each child node is tracked using IO to determine viewability.
• The child elements also dynamically change scale on zooming/pinch-zoom gesture occurs using CSS transforms. When scaled down past a certain threshold the rootMargin needs to be adjusted to accurately detect the correct element.

[metonym]

And why not use the #key API to recreate the component if the root margin changes?

[dysfunc]

Using #key satisfies simple cases where you can afford to destroy and recreate static elements. Applying #key to anything dynamic will reset when rootMargin changes.

[metonym]

I'll take another look at this – I agree that updating the root margin can be a common enough use case.

[metonym]

Thank you for keeping this up to date. Tested locally and it works great.

[metonym]

Published to NPM in version 0.7.0

[ysfcbn]

I need to use it with JavaScript. can you help me please for convert this code JS syntax?