How [class] [attr] [style] directives work

Answer 1

As @Edric specified here, the matter is the binding target. I firstly thought all of these are handled by a built-in directive

[attr.role]
[class.extra-sparkle]
[style.width.px]

like ngClass and ngStyle but it is not. None of these are directives, they are just synonyms of this:

bind-attr.role
bind-class.extra-sparkle
bind-style.width.px

and the bind prefix are compiled at template parser here. The "bind thing" is not a directive, it is build-in feature that compiler already handles all the bound properties, attributes etc.