<subscription>
  <h3>{ props.plan.name }</h3>
  <script>
    export default {
      onMounted(props) {
        // Get JS handle to props
        const {plan, showDetails} = props
      }
    }
</subscription>

Note how we named the show-details attribute, it is written in dash case but it will be converted to camel case inside the this.props object.

Then we mount the component to the page with a plan configuration object:

Parent component properties are passed with the riot.mount method and child component ones are passed via the tag attribute.

<account>
  <subscription/>
  <script>
    import Subscription from './subscription.riot'
    export default {
      components: {
        Subscription
      }
</account>

Using the <slot> tag you can inject custom HTML templates in a child component from its parent

Child component definition

The child component is placed in a parent component injecting custom HTML into it

<user>
  <greeting>
    <b>{ text }</b>
  </greeting>
  <script>
    export default {
      text: 'world'
    }
</user>

See for slots.

Slots work only in compiled components, all the inner HTML of the components placed directly in your page DOM will be ignored.

Riot if, and is directives are not supported on slot tags