Reading through this Angular SASS code:
:host {
display: flex;
flex-wrap: wrap;
}
:host(.column) {
flex-direction: column;
margin-top: 1rem;
margin-bottom: 2rem;
}
What does the :host(.column)
selector select. Is it the host element when it has a column
class attached to it? Is that generally how we should interpret the argument passed in parenthesis?
CodePudding user response:
Your conclusion is correct. The selector inside :host()
must match the :host
for the CSS to apply. According to the Angular Component Styling documentation:
Use the function form to apply host styles conditionally by including another selector inside parentheses after
:host
In this example the host's content also becomes bold when the
active
CSS class is applied to the host element.:host { font-style: italic; } :host(.active) { font-weight: bold; }