Riot DOM Caveats

Riot components rely on browsers rendering so you must be aware of certain situations where your components might not render properly their template.

Consider the following tag:

  2. <my-fancy-options>
  3.   <option>foo</option>
  4.   <option>bar</option>
  5. </my-fancy-options>

This markup is not valid if not injected in a <select> tag:

  2. <!-- not valid, a select tag allows only <option> children -->
  3. <select>
  4.   <my-fancy-options />
  5. </select>
  7. <!-- valid because we will render the <option> tags using <select> as root node -->
  8. <select is="my-fancy-options"></select>

Tags like table, select, svg… don’t allow custom children tags so the use of custom riot tags is forbidden. Use is instead like demonstrated above. more info