Expressions can set attributes or nested text nodes:

    2.   { /* nested_expression */ }
    3. </h3>

    Expressions are 100% javascript. A few examples:

    1. { title || 'Untitled' }
    2. { results ? 'ready' : 'loading' }
    3. { new Date() }
    4. { message.length > 140 && 'Message is too long' }
    5. { Math.round(rating) }

    The goal is to keep the expressions small so your HTML stays as clean as possible. If your expression grows in complexity consider moving some of logic to the “onBeforeUpdate” callback. For example:

    Boolean attributes (checked, selected, etc.) are ignored when the expression value is falsy:

    <input checked={ null }> becomes <input>.

    The following expression does not work:

    1. <input type="checkbox" { true ? 'checked' : ''}>

    since only attribute and nested text expressions are valid. Riot detects automatically all the valid html boolean attributes.

    You can also use an object spread expression to define multiple attributes. For example:

    1.   <p { ...attributes }></p>
    2.   <script>
    4.       attributes: {
    5.         id: 'my-id',
    6.         role: 'contentinfo',
    7.         class: 'main-paragraph'
    8.       }
    9.     }
    10.   </script>
    11. </my-component>

    evaluates to <p id="my-id" role="contentinfo" class="main-paragraph">.

    You can output an expression without evaluation by escaping the opening bracket:

    Be sure to escape brackets in any situation where they should not be evaluated. For example, the Regex pattern below will fail to validate the intended input (any two numeric characters) and instead only accept a single numeric character followed by the number “2”:

    The correct implementation would be:

    1. <my-component>
    2.   <input type="text" pattern="\d\{2}">
    3. </my-component>

    Expressions inside tags are ignored.

    Riot expressions can only render text values without HTML formatting. However you can make a custom tag to do the job. For example:

    1.   <script>
    2.     export default {
    3.       setInnerHTML() {
    4.         this.root.innerHTML = props.html
    5.       }
    6.       onMounted() {
    7.         this.setInnerHTML()
    8.       },
    9.       onUpdated() {
    10.         this.setInnerHTML()
    11.       }
    12.     }
    13.   </script>

    After the tag is defined you can use it inside other tags. For example

    this could expose the user to XSS attacks so make sure you never load data from an untrusted source.