leptos-use/docs/book/src/element_parameters.md

Element Parameters

Many functions in this library operate on HTML/SVG elements. For example, the function use_element_size returns the width and height of an element:

# use leptos::{*, html::Div};
# use leptos_use::{use_element_size, UseElementSizeReturn};
#
# #[component]
# pub fn Component() -> impl IntoView {
let el = create_node_ref::<Div>();

let UseElementSizeReturn { width, height } = use_element_size(el);

view! {
    <div node_ref=el></div>
}
# }

In the example above we used a Leptos NodeRef to pass into the function. But that is not the only way you can do that. All of these work as well:

use_element_size(window().body()); // Option<web_sys::Element>
use_element_size(window().body().unwrap()); // web_sys::Element
use_element_size("div > p.some-class"); // &str or String intepreted as CSS selector

pub fn some_directive(el: HtmlElement<AnyElement>) {
    use_element_size(el); // leptos::html::HtmlElement<T>
}

Signal of Strings: Signal<String>, ReadSignal<String>, RwSignal<String>, Memo<String>; also works with &str:

let (str_signal, set_str_signal) = create_signal("div > p.some-class".to_string());
use_element_size(str_signal);

Signals of Elements: Signal<web_sys::Element>, ReadSignal<web_sys::Element>, RwSignal<web_sys::Element>, Memo<web_sys::Element>; also works with Option<web_sys::Element>:

let (el_signal, set_el_signal) = create_signal(document().query_selector("div > p.some-class").unwrap());
use_element_size(el_signal); 

How it works

Looking at the source code of use_element_size you'll find sth like

pub fn use_element_size(el: Into<ElementMaybeSignal<...>>) -> UseElementSizeReturn {}

All the above code works because there are From implementations for all of these types for ElementMaybeSignal.

ElementsMaybeSignal

Some functions work on one or more elements. Take use_resize_observer for example. This works very much the same way as described above but instead of Into<ElementMaybeSignal> it takes an Into<ElementsMaybeSignal> (note the plural). This means you can use it exactly in the same ways as you saw with the singular ElementMaybeSignal. Only this time, when you use String or &str it will be interpreted as CSS selector with query_selector_all.

But you can also use it with containers.

// Array of Option<web_sys::Element>
use_resize_observer([window().body(), document().query_selector("div > p.some-class").unsrap()]);

// Vec of &str. All of them will be interpreted as CSS selectors with query_selector_all() and the
// results will be merged into one Vec.
use_resize_observer(vec!["div > p.some-class", "p.some-class"]);

// Slice of NodeRef
let node_ref1 = create_node_ref::<Div>();
let node_ref2 = create_node_ref::<Div>();
use_resize_observer(vec![node_ref1, node_ref2].as_slice());

Usage in Options

Some functions have options that take Element(s)MaybeSignal. They can be used in the same way.

use_mouse_with_options(
    UseMouseOptions::default().target("div > p.some-class")
);

See also "Excluding Elements" in on_click_outside.