Tech and Media Labs
This site uses cookies to improve the user experience.




Riot.js CSS Styling

Jakob Jenkov
Last update: 2017-04-19

Riot.js tags can use CSS styles internally to style the HTML inside the custom tag. Here is an example of a Riot.js tag which defines a style for the <h1> element used inside it:

<mytag>
<h1>The Title</h1>

<style>
    h1 {
        font-family: Arial;
    }
</style>
</mytag>

Tag Styles Are Local

The CSS styles defined inside a Riot.js tag are local to the HTML inside that tag. In the example above, the style defined for the <h1> element will only affect <h1> elements inside a mytag tag. Riot.js takes care of that when the tag definition is compiled.

Using Expressions to Set Style Classes

You can use Riot.js expressions to set a style class on an HTML element used inside a Riot.js tag. Here is an example of setting a CSS style class using a Riot.js expression:

<anothertag>
<h1 class="{selectedClass}">The Title</h1>

<style>
    .aclass {
        font-family: Arial;
        color: #ff00ff;
    }
</style>

<script>
    this.selectedClass = "aclass";
</script>

</anothertag>

Riot.js Styles Live in the Head Element

The Riot.js tag compiler will extract CSS styles from the tag definition and inject them into the <head> element of the HTML page using the tag. The Riot.js tag compiler does this to avoid repeating the CSS styles in case a Riot.js tag is used multiple times inside the same HTML page.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC