You can scope styles with vanilla CSS now

Key Takeaways

I have this called to action down here where I have some Styles and traditionally we've either had two solutions to like styling or scoping style things is using descendant selectors or using like a bem naming methodology right and so let's say I had my descendant selectors here where I have my color of yellow on there and that works for changing the title here without changing my H2 that's outside of it uh right there so this is staying white because it's a descendant selector the problem is I've also changed the style of this and I can't read my links and my H2S that are inside of there so first of all what we can do is let's come in with an at scope and inside of parenthesis I'm just going to do call to action like this and then we just Nest the selectors we want here so I can say that my H2 here is going to be color and we're going to go with purple just so we can actually uh see some of the things that are here we're going to remove what I have right there and so that's going to scope that purple H2 to right here which is awesome and it's not changing the H2 that's outside over here because this H2 is not scoped it's not inside of the call action so right away it's a win and the other win is it's not boosting specificity because you can see that this is still coming in as blue because if we come and take a look this one here is a class and so the class here is winning over just the regular H2 selector I have right there so that's a pretty cool win but let's say I didn't have this class down here on my inverted and I don't actually want this one to change to purple either I have a call to action but I want to have like a slotted thing in there like you might have with a JS framework where the the Styles won't bleed into to the other components that you're inserting into and you can actually mimic that behavior now with CSS uh I'm going to do it here so we can say call to action and then this here is my inverted so I could say two and then do a do inverted and now the purple is only going to apply for the call to action but it will not go inside of that inverted here and you can see this is actually still black and just I'll change this over to Yellow so we can really see what's going on there this is yellow now this is very specific in this case uh with the inverted class so maybe you wouldn't want that maybe you just want to actually come in with something where you could put anything you want there so this could even be a div class of slot that you have on there and then this could be what's actually styling it and then you just come here and have a slot so anything that is in the called to action up to the slot of that component where you're slotting in other things it's not going to get those styles on there and you s start mimicking those behaviors coming from the JavaScript Frameworks but in Native CSS which opens up lot more interesting doors and other things that I don't have time to cover in a short right now but if you'd like a more detailed video on how scope works and all of that there is a link on this video floating probably somewhere around here-ish uh that you can click on to get a lot more information on how it works