How to provide dynamic styling to riotjs tag - riot.js

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.