Special CSS selectors Angular supports - lordoftheflies/angular-essential-training GitHub Wiki

Styling elements within a component template can be done within the component CSS using common CSS selectors, adding styling to the host element for the component. The elements specified by the selector metadata in the component decorator, needs to be handled a bit differently. In fact, the way that the emulated view encapsulation mode handles it is similar to the shadow DOM approach. The emulated mode will look for a couple of special pseudo class selectors in the component CSS. Colon host, and colon hosts dash context, and we'll handle shimming those to scope them to the component. Let's see how we can use these to style the category list element, and even provide different style rules based on any ancestors of the component element. To begin with, we need to touch on a styling scenario that comes with custom elements. When we create a component in angular and use a selector that targets a custom element, like the MW dash category list selector value here. And then create an HTML element somewhere in the app markup, the browser will treat that as a custom element. Custom elements do not have any block level display by default. If we want them to have that, we need to add styling for it. One of the ways we can do this, is to make use of the colon host pseudo class selector in the component styling. So let's add a new CSS selector in the inline styles array and name it colon host. And in the rule set, we can add display block. This will ensure that any MW dash category dash list elements in the app will be set up with block display, reserving space and the layout for that element. And let's also add a margin bottom value of 20 pixels. Let's switch over to the browser to take a look at how angular shims this to handle the style scoping. Over in the browser, the MW dash category dash list element has an attribute named underscore NG host dash CCX dash C zero. Angular applied this to the markup to give MW dash category dash list elements a unique identifier. Note that this is different from the underscore NG content attribute found on the span elements within the inner HTML of this element. The underscore NG host one is designed to provide a way to style the host element. If we take a look at the styles tab in the dev tools, we can see that there is a style rule set for underscore NG host. That is being matched and applied with the style rules we added. This is how angular handles the colon host pseudo class selector in emulated mode. It uses an attribute selector in the final CSS. So we can use colon host in our component CSS to write styling for the component host element. Now notice here, if I click on the different links for medium types, we see the category list values changing but they are all the same color. However, the actual media items are different colors based on the medium type. That color change is CSS based, and we can actually tap into that to make the category list items match the color based on the selected medium type. We can make use of the special colon host dash context pseudo class selector to pull that off. Back in the code for the category dash list dot component dot TS file. Let's add the colon host dash context pseudo class selector. The colon host context is designed to be written in function form, with a pair of parentheses at the end of it, and then a selector string value inside of it. That selector will be used to match against any ancestor of this component, meaning anywhere up the component tree from where this component is nested. So for example, we can put a selector value of dot medium dash movies in here. And if this category list component is nested anywhere below an element that has a CSS class of medium dash movies on it, this rule set will get applied. We want to make the background color of the span elements in this component match the medium type colors. So let's add the span tag onto this selector, and then in the rule set add background color and set that to a value that matches the movies color. Note that I am using the same color value found in the media dash item dot component dot CSS file in the project code. Okay let's set up one more for the medium type of series. So colon hosts dash context, and then a pair of parentheses, then inside of those we put dot medium dash series, then a space and the span selector, and within the curly braces for the style rule set we can add background color and give that the value for the series color. Let's switch over to the browser and see these inaction. When we click on the different medium types, we can see the category list labels change color to match the medium type. And when we use the context menu in the browser to inspect one of the category names, and look at the styles tab in the dev tools, we see the selector being matched that handles the background color rule. This CSS selector starts with the medium dash series class selector we specified, then an attribute selector in the square braces. That is the unique NG host value for this component type. Then the span element selector that we added that is shimmed with the attribute selector for NG content. Which is just like the use of common CSS that we saw in previous lessons. Angular handled building this complex CSS selector for us when the view encapsulation mode is set to emulate it. So in emulated mode we can make you so the colon host pseudo class selector in our component CSS, to style the host element of our components. And we can use colon hosts dash context to style the host element or any nested elements based on a matching ancestor selector.