docs: update Ivy compatibility guide to include a note on styling precedence changes

we have a css class used to show/hide element. and we also have angular directive to take input and add/remove this class using host binding. below is the code.

@Directive({
  selector: '[ngShow]',
  host: {
    '[class.hidden]': '!ngShow',
    '[attr.aria-hidden]': '!ngShow'
  }
})
export class NgShowDirective {
  @Input()
  ngShow = false;
}

Usage:

<div class="hidden" [ngShow]="asyncProperty">test 123</div>

when we set asyncProperty value to true after execution of an async function, it does not remove the “hidden” css class. this worked in angular v8 and started to break after v9 upgrade.

tested against v9.1.0

[pkozlowski-opensource]

I believe that it works as designed in Angular v9: classes added on an element have a higher priority that ones coming from a host binding. Yes, this is change from the v8 behaviour, but this is a deliberate change. You can find more info here: https://angular.io/guide/template-syntax#styling-precedence

[atscott]

As discussed here, this is working as intended in Ivy and the styling precedence is described here: https://angular.io/guide/style-precedence. Keeping this open, since it should be included in the compatibility guide