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

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.

Author: crisbeto

src/lib/badge/badge.spec.ts

@@ -1,5 +1,5 @@
 import {ComponentFixture, TestBed, fakeAsync} from '@angular/core/testing';
-import {Component, DebugElement} from '@angular/core';
+import {Component, DebugElement, ViewEncapsulation} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MatBadge, MatBadgeModule} from './index';
 import {ThemePalette} from '@angular/material/core';
@@ -140,10 +140,27 @@ describe('MatBadge', () => {
     expect(classList.contains('mat-badge-hidden')).toBe(false);
   });
 
+  it('should apply view encapsulation on create badge content', () => {
+    const badge = badgeNativeElement.querySelector('.mat-badge-content')!;
+    let encapsulationAttr: Attr | undefined;
+
+    for (let i = 0; i < badge.attributes.length; i++) {
+      if (badge.attributes[i].name.startsWith('_ngcontent-')) {
+        encapsulationAttr = badge.attributes[i];
+        break;
+      }
+    }
+
+    expect(encapsulationAttr).toBeTruthy();
+  });
+
 });
 
 /** Test component that contains a MatBadge. */
 @Component({
+  // Explicitly set the view encapsulation since we have a test that checks for it.
+  encapsulation: ViewEncapsulation.Emulated,
+  styles: ['span { color: hotpink; }'],
   template: `
     <span [matBadge]="badgeContent"
           [matBadgeColor]="badgeColor"

src/lib/badge/badge.ts

@@ -9,7 +9,16 @@
 import {AriaDescriber} from '@angular/cdk/a11y';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {DOCUMENT} from '@angular/common';
-import {Directive, ElementRef, Inject, Input, NgZone, OnDestroy, Optional} from '@angular/core';
+import {
+  Directive,
+  ElementRef,
+  Inject,
+  Input,
+  NgZone,
+  OnDestroy,
+  Optional,
+  Renderer2,
+} from '@angular/core';
 import {ThemePalette} from '@angular/material/core';
 
 
@@ -102,7 +111,9 @@ export class MatBadge implements OnDestroy {
       @Optional() @Inject(DOCUMENT) private _document: any,
       private _ngZone: NgZone,
       private _elementRef: ElementRef<HTMLElement>,
-      private _ariaDescriber: AriaDescriber) {}
+      private _ariaDescriber: AriaDescriber,
+      /** @breaking-change 8.0.0 Make _renderer a required param and remove _document. */
+      private _renderer?: Renderer2) {}
 
   /** Whether the badge is above the host or not */
   isAbove(): boolean {
@@ -132,7 +143,9 @@ export class MatBadge implements OnDestroy {
 
   /** Creates the badge element */
   private _createBadgeElement(): HTMLElement {
-    const badgeElement = this._document.createElement('span');
+    // @breaking-change 8.0.0 Remove null check for _renderer
+    const rootNode = this._renderer || this._document;
+    const badgeElement = rootNode.createElement('span');
     const activeClass = 'mat-badge-active';
 
     badgeElement.setAttribute('id', `mat-badge-content-${this._id}`);