BlueHighlightDirectivewill try to set the background color of the element to blue while changing the color of the text to gray, while the
YellowHighlightDirectivewill try only to change the background color to yellow. Notice that both are targeting any HTML element that has the property
appHighlight. What would happen if we add both directives to the same module?
h1element but, which styles are going to end up being applied?
appHighlight, it will first apply the transformations of
BlueHighlightDirective, setting the text gray and the background blue, and then will apply the transformations of
YellowHighlightDirective, changing again the background color to yellow.