Out-of-band DOM access


The ref keyword can be used inside of any HTML element or component to get the DOM Element that the item is attached to. This can be used to make changes to the DOM outside of the view lifecycle method.

This is useful for getting ahold of canvas elements, or scrolling to different sections of a page.

The syntax is:

// In create
self.node_ref = NodeRef::default();
// In view
html! {
<div ref=self.node_ref.clone()></div>
// In update
let has_attributes = self.node_ref.try_into::<Element>().has_attributes();
Edit on GitHub