Riot JS - Scoped CSS and Toggled Classes
Riot takes a 'keep your styles close' approach with custom tags. You are encouraged to place your styles for a tags element right inline with the html and javascript. Learn how riot parses the inline styles as well as ways to keep your styles from bleeding out to the rest of your app. Scoped styles provide great isolation for your custom tag. Use the class attribute's special binding syntax to easily add and remove a class based on an expression.
[00:00] We're seeing a trend of keeping CSS close to the HTML that it's dialing. In Polymer, you can write your CSS within the component. In React, you specify CSS with a JavaScript object and have that live in the component. Riot follows suit.
[00:16] I have a simple recipe app setup here showing one of my favorite foods. I have a custom app tag and a custom ingredient tag. I have three ingredients listed. Each one takes a name and a mount option and tracks its own state of either being added or not added.
[00:33] I don't like how this is styled, though. Within a Riot tag, you can add a style tag and put your CSS inline right within the component. I personally like the idea of keeping styles close to the elements. There's less context switching, and it helps give the tag a feeling of being fully isolated and modular.
[00:54] If we inspect this, we can see that Riot actually pulls the styles out and puts them into the head minified. These styles are not really isolated. I'm writing my styles with simple, direct selectors as if I were within a shadow DOM, but Riot doesn't use shadow DOM.
[01:14] That means these styles are much too generic for any application. I'd never want to target all inputs or spans and style them in this way. There's a feature to help us with that. Simply add a scoped attribute to your style tag, and this will prepend every style with the route tag's name, essentially providing isolation to your styles.
[01:37] One problem you'll notice, though, is the styles we had on our ingredient tag, the route tag, they're no longer working. That's because it was also prepended. Now, that style's trying to find an ingredient within an ingredient. To style the route tag, you use :scope. Now, we're looking good again.
[01:58] Let's style something dynamically. We already have a style setup for the name label for when this ingredient is added. On the name element, I'll add a class and use a special binding syntax that was basically created just for classes. It lets you pass in key value pairs. The key is the class you want add and remove, in this case added. The value is the expression, and that will add or remove the class depending on if it's truthy or falsy.
[02:26] If you know Angular, it's the same thing. The value will be a reference to this tag's "added" property. Now, we can click on an ingredient and see the style change.