Refs

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:

  1. // In create
  2. self.node_ref = NodeRef::default();
  3. // In view
  4. html! {
  5. <div ref=self.node_ref.clone()></div>
  6. }
  7. // In update
  8. let has_attributes = self.node_ref.cast::<Element>().unwrap().has_attributes();