diff options
Diffstat (limited to 'alpinejs/packages/docs/src/en/directives/html.md')
| -rw-r--r-- | alpinejs/packages/docs/src/en/directives/html.md | 29 |
1 files changed, 29 insertions, 0 deletions
diff --git a/alpinejs/packages/docs/src/en/directives/html.md b/alpinejs/packages/docs/src/en/directives/html.md new file mode 100644 index 0000000..0d1d0b6 --- /dev/null +++ b/alpinejs/packages/docs/src/en/directives/html.md @@ -0,0 +1,29 @@ +--- +order: 7 +title: html +--- + +# `x-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. + +```alpine +<div x-data="{ username: '<strong>calebporzio</strong>' }"> + Username: <span x-html="username"></span> +</div> +``` + +<!-- START_VERBATIM --> +<div class="demo"> + <div x-data="{ username: '<strong>calebporzio</strong>' }"> + Username: <span x-html="username"></span> + </div> +</div> +<!-- END_VERBATIM --> + +Now the `<span>` tag's inner HTML will be set to "<strong>calebporzio</strong>". |