28 lines
773 B
Markdown
28 lines
773 B
Markdown
# Alpine.js Documentation - Directives
|
|
|
|
Alpine directives are attributes that you can add to HTML elements to give them special behavior.
|
|
|
|
## [x-html](/directives/html)
|
|
|
|
`x-html` sets the "innerHTML" property of an element to the result of a given expression.
|
|
|
|
> ⚠️ Only use on trusted content and never on user-provided content. ⚠️
|
|
> Dynamically rendering HTML from third parties can easily lead to XSS vulnerabilities.
|
|
|
|
Here's a basic example of using `x-html` to display a user's username.
|
|
|
|
```
|
|
<div x-data="{ username: '<strong>calebporzio</strong>' }">
|
|
|
|
|
|
nUsername: <span x-html="username"></span>
|
|
|
|
|
|
n</div>
|
|
```
|
|
|
|
Username:
|
|
|
|
Now the `<span>` tag's inner HTML will be set to "**calebporzio**".
|
|
|
|
Code highlighting provided by [Torchlight](https://torchlight.dev/) |