Riot.js CSS Styling
Jakob Jenkov |
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.
| Tweet | |
Jakob Jenkov | |