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.