Add the onvisible event handler to Element

[ASR-ASU]

This PR add the capability to handle the visible events for a given Element:

#[component]
fn MyComponent() {
    rsx! {
        div {
            onvisible: move |evt| {
	        let data = evt.data();

                println!("bounding_client_rect={:?}", data.get_bounding_client_rect());
                println!("intersection_ratio={:?}", data.get_intersection_ratio());
                println!("intersection_rect={:?}", data.get_intersection_rect());
                println!("is_intersecting={:?}", data.is_intersecting());
                println!("root_bounds={:?}", data.get_root_bounds());
                println!("target={:?}", data.get_target());
                println!("time={:?}", data.get_time());
            }
        }
    }
}

For now, the IntersectionObserverEntry.target is not used/serialized. If it make sense to use it, how can we serialize it? Could we use the data-dioxus-id?

[ASR-ASU]

ElementRef could do the trick.

[ealmloff]

Thanks for working on this! I had a few questions about some APIs, otherwise the implementation looks good

[ealmloff]

This looks the same as the branch following it. Should it be merged or do we need to handle converting visible data to any in a different way?

[ASR-ASU]

Indeed. I'm going to remove this branch.

[ealmloff]

ElementId isn't very useful in user-facing code. It is mainly used in core/the renderers. We could use MountedData here which wraps the ElementId or web_sys::Element with accessors.

The target here will always be the element that the event listener is attatched to right? If that is true, then it might be better to wait until we add target() -> MountedData to all events together.

[ASR-ASU]

This is also my understanding (cf. https://css-tricks.com/a-few-functional-uses-for-intersection-observer-to-know-when-an-element-is-in-view/). Are you referring to the #2858?

[ealmloff]

Are you referring to the #2858?
Yes, both relatedTarget and target need the mounteddata for the element