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

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}`);