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 |