Styling

You can put a style tag inside. Riot.js automatically takes it out and injects it into <head>. This happens once, no matter how many times the component is initialized.

  1. <my-component>
  3.   <!-- layout -->
  4.   <h3>{ props.title }</h3>
  6.   <style>
  7.     /** other component specific styles **/
  8.     h3 { font-size: 120% }
  9.     /** other component specific styles **/
  10.   </style>
  12. </my-component>

Scoped CSS

Scoped css and :host pseudo-class) is also available for all browsers. Riot.js has its own custom implementation in JS which does not rely on or fallback to the browser implementation. The example below is equivalent to the first one. Notice that the example below uses the :host pseudo-class instead of relying in the component name to scope the styles.

  1. <my-component>
  3.   <!-- layout -->
  4.   <h3>{ props.title }</h3>
  6.   <style>
  7.     :host { display: block }
  8.     h3 { font-size: 120% }
  9.     /** other component specific styles **/
  10.   </style>
  12. </my-component>