Applying attribute specificity to an Angular CSS Selector?-CodePudding

In this demo the el_select directive is used to change the style of the Angular Material Select component. This is the demo html template:

<mat-form-field [el_select]="{ height: '52px', radius: '55px'}" appearance="outline" >
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" panelClass="select-panel">
    <mat-option *ngFor="let topping of toppingList" [value]="topping"
      >{{topping}}</mat-option
    >
  </mat-select>
</mat-form-field>

I'm also trying to use the style sheet to apply styles that are not dynamic. If I apply the styles using the class custom-field like this it works:

.custom-field
  .mat-mdc-form-field-flex
  .mdc-notched-outline
  .mdc-notched-outline__notch
  label {
  top: 50%;
  background-color: red;
}

It works. However if I change the selector so that it uses the mat-form-field[el_select] for specificity, instead of custom-field, the selector is no longer applied.

I expected that this CSS should be interchangeable with the custom-field CSS:

mat-form-field[el_select]
  .mat-mdc-form-field-flex
  .mdc-notched-outline
  .mdc-notched-outline__notch
  label {
  top: 50%;
  background-color: red;
}

Any ideas as to why it is not applied?

CodePudding user response：

Angular Inputs aren't represented in the DOM !

You could add a host binding to your directive that can be match by a css selector. !

 @HostBinding('attr.my-attr')