The two pages share a filter component, the style is bootstrap, and there are media queries
special selector
There are some special selectors in component styles that are imported from the Shadow DOM style scoping area (documented in the W3C 's CSS Scoping Module Level 1 ) :
:host selector
Use :host pseudo-class selectors to select elements within the component 's host element (relative to elements inside the component's template).
content_copy:host {
display: block;
border: 1px solid black;
}
:host Selection is the only way to target a host element. Other than that, you won't be able to specify it, because the host is not part of the component's own template, but part of the parent's template.
To make the host style conditional, put other selectors in parentheses just like functions .:host
The next example again targets the host element, but only works if it also has a active CSS class.
content_copy:host(.active) {
border-width: 3px;
}
:host-context selector
Sometimes it 's useful to apply styles based on some condition from outside the component's view. For example, there might be a CSS class on an element of the document <body> that represents the style's theme, and you should use that to determine the style of the component.
This is where :host-context() pseudo-class selectors can be used. It is also used in a similar :host() form. It looks for CSS classes in the ancestors of the current component's host element , up to the root of the document. It is very useful when combined with other selectors.
In the example below, theme-light the background-color styles are applied to all elements inside<h2> the component only if an ancestor element has a CSS class .
content_copy:host-context(.theme-light) h2 {
background-color: #eef;
}
