HTML elements as components

Standard HTML elements can be used as riot components in the page body with the addition of the is attribute.

  1. <ul is="my-list"></ul>

This provides users with an alternative that can provide greater compatibility with css frameworks. The tags are treated like any other custom component.

  1. riot.mount('my-list')

will mount the ul element shown above as if it were <my-list></my-list>

Note that you can use also an expression in the is attribute and riot will be able to render dynamically also different tags on the same DOM node

  1. <my-component>
  2.   <!-- dynamic component -->
  3.   <div is={ animal }></div>
  4.   <button onclick={ switchComponent }>
  5.     Switch
  6.   </button>
  8.   <script>
  9.     export default {
  10.       animal: 'dog',
  11.       switchComponent() {
  12.         // riot will render the <cat> component
  13.         // replacing <dog>
  14.         this.animal = 'cat'
  15.         this.update()
  16.       }
  17.     }
  18.   </script>
  19. </my-component>

Note that when using the is attribute, the tag name should be rendered in all lowercase, regardless of how it’s defined.

  1.   <MyComponent></MyComponent> <!-- Correct -->
  2.   <div is="mycomponent"></div> <!-- Also Correct -->
  3.   <div is="MyComponent"></div> <!-- Incorrect -->
  4.   <script>
  5.     riot.mount('MyComponent');
  6.   </script>

Note that you can use is attribute with any HTML tags, but not with template tag.