How to provide dynamic styling to riotjs tag

Question

I want to create a riotjs tag to whom some style or css class can be added directly in HTML page. And I also can set some style attributes dynamically from tag script;

For Example;

<my-tag class="some class" attr1="" attr2="" />

<my-tag>
  <script>
    if(opts.attr1) //set some style to my-tag
  </script>
</my-tag>

I can achieve it by creating a HTML tag string with dynamic properties and insert as HTML to root. But I don't want to add additional child tag just for styling.

Answer 1

What about something like this. You pass some options to the tag, and then change the style classes dynamically. Check the example http://plnkr.co/edit/ZuPMFFBIuDPSeawsEkPX?p=preview

<my-tag color="green"></my-tag>
<my-tag color="red"></my-tag>


<my-tag>
  <h1 class="{opts.color}">{ message }</h1>

  <script>
    this.message = 'hello there'
  </script>
  <style>
    .red {
      color: red; 
    }
    .green {
      color: green; 
    }
  </style>
</my-tag>

Answer 2

You can optionally include classes onto your elements by using the syntax below.

<my-tag>
    <div class="some-class another-class { my-class: attr1 }"></div>

<script>
    this.attr1 = this.opts.attr1;
</script>

</my-tag>

And then in the HTML where you use the tag.

<my-tag attr1="whatever"></my-tag>

So if this.opts.attr1 is set, this will add the class my-class to the <div> element.