# Riot.js cheatsheet

This article was originally published at [https://gist.github.com/joepie91/ed3a267de70210b46fb06dd57077827a](https://gist.github.com/joepie91/ed3a267de70210b46fb06dd57077827a).

### Component styling[](https://gist.github.com/joepie91/ed3a267de70210b46fb06dd57077827a#component-styling)

**This section only applies to Riot.js 2.x.** Since 3.x, all styles are scoped *by default* and you can simply add a `style` tag to your component.

1. You can use a `` 4. Use the `:scope` pseudo-selector, eg. `` 5. You can change where global styles are 'injected' by having `` somewhere in your ``. This is useful for eg. controlling what styles are overridden. ### Mounting[](https://gist.github.com/joepie91/ed3a267de70210b46fb06dd57077827a#mounting) "Mounting" is the act of attaching a custom tag's template and behaviour to a specific element in the DOM. The most common case is to mount all instances of a specific top-level tag, but there are more options: 1. Mount all custom tags on the page: `riot.mount("*")` 2. Mount all instances of a specific tag name: `riot.mount("app")` 3. Mount a tag with a specific ID: `riot.mount("#specific_element")` 4. Mount using a more complex selector: `riot.mount("foo, bar")` Note that "child tags" (that is, custom tags that are specified within other custom tags) are automatically mounted as-needed. You do not need to `riot.mount` them separately. The simplest example: ```javascript ``` ### Tag logic[](https://gist.github.com/joepie91/ed3a267de70210b46fb06dd57077827a#tag-logic) - **Conditionally add to DOM:** ` ... ` - **Conditionally display:** ` ... ` (but the tag always *exists* in the DOM) - **Conditionally hide:** ` ... ` (but the tag always *exists* in the DOM) - **For-each loop:** ` ... (you can access 'item' from within the tag) ... ` (one instance of `your-tag` for each `item` in `items`) - **For-each loop of an object:** ` ... (you can access 'key' and 'value' from within the tag) ... ` (this is *slow!*) All of the above also work on *regular* (ie. non-Riot) HTML tags. If you need to add/hide/display/loop a *group* of tags, rather than a single one, you can wrap them in a `` pseudo-tag. This works with all of the above constructs. For example: ```html ```