fix(badge): apply view encapsulation attributes on badge element

[crisbeto]

Since we create the badge content element dynamically, the view encapsulation attributes won't be applied. These changes use the renderer to create the element, which will respect view encapsulation.

[jelbourn]

What practical effect does this change have? I'd rather avoid introducing use of Renderer2 since it may make it more difficult to work with the ivy renderer at some point in the future

[crisbeto]

The issue that it solves is that if somebody decided to do .mat-badge-content { color: red } inside a component with view encapsulation, those styles won't apply to the badge, even though the element is inserted next to other elements that will receive the styling.

[jelbourn]

LGTM

I see, we can figure out any problems later, then. Just needs rebase.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}