"Subclass" a Riot.js template/custom element?

Question

With Riot.js, is there any provision for inheritance with custom elements?

As a trivial example, suppose I have a custom element <custom-button>. Something like this:

<custom-button>
  <button>{innerContent}</button>
</custom-button>

Now, maybe I want to sub-class this button as a new custom element, perhaps something that includes an icon:

<custom-button-with-icon>
  <inner-content>
    {icon} {text}
  </inner-content>
  <script>
    this.extends('custom-button');
  </script>
</custom-button-with-icon>

Is there anything like this in Riot.js that allows me to override part of an outer template, or otherwise subclass a custom element?

Answer 1

If you are using Riot.js v4, for subclassing the template/custom component you can use the slot functionality of Riot.js. You create the component with a slot field

<custom-button>
  <button>
   <slot/>
  </button>
</custom-button>

Then you can create another component which uses the custom button

<custom-button-with-icon>
  <custom-button>
    {icon} {text}
  </custom-button>
</custom-button-with-icon>

Then the slot would be replaced with {icon} {text} when the custom-button-with-icon component is used. More info here: https://riot.js.org/api/#slots