---
title: "Dynamic References in LemonadeJS | v5 docs"
description: "LemonadeJS v5 archive. Use the ref attribute in LemonadeJS to directly access DOM elements or components for interaction and updates."
source: https://lemonadejs.com/docs/v5/references/
---
# References
The ref attribute provides direct access to DOM elements or components within your template. References can be created using `:ref` or `lm-ref`, allowing you to interact with these elements from your component logic.
## Reference to a DOM element
The `DOM references` enable direct interaction with specific elements or component instances, making tasks like style manipulation, event handling, and dynamic updates straightforward and efficient.
### Reference as a Function
The ref attribute can be assigned a function, providing enhanced flexibility and control over element references. This method is especially useful for dynamically handling elements or managing references as local variables.
```html
```
```javascript
export default function Component(children, { onload }) {
let ref = null;
onload(() => {
ref.style.color = 'red';
});
return render => render`
Hello World
`;
}
```
### Reference as a Component Property
Alternatively, you can create a reference to an element by binding a property from the component's `this` object to the element's ref attribute.
```html
```
```javascript
export default function Test() {
this.onload = () => {
this.input.value = 123;
}
return render => render``
}
```
### Root Element References
The root element of a LemonadeJS component is its outermost DOM container. If the component's template contains a single root element, LemonadeJS automatically assigns it to this.el. However, this reference is unavailable when the root is a document fragment.
```html
```
```javascript
export default function Test() {
this.onload = () => {
this.el.textContent = 'Hello World';
}
return render => render``;
}
```
## References to a Component
Creating a reference to a child component can expand the possibilities for creating dynamic components since it stores access to all properties of the child.
```html
```
```javascript
import lemonade from 'lemonadejs';
function Hello() {
// Default property
this.title = 'Hello World';
// Component template
return render => render`
`;
}
```
### What's Next?
Learn about the ready attribute, which enables actions when an element is fully initialized.
- [Ready Attribute](/docs/v5/ready/)