ViewEncapsulation.ShadowDom is not working

Viewed 889

I am using Angular 7 and bootstrap 3.3.7(in order to user glyphicon). I am trying to use ViewEncapsulation.ShadowDom in my component. But I am getting a error "ERROR DOMException: Failed to execute 'attachShadow' on 'Element': This element does not support attachShadow". Can anybody explain me, why I am getting this error ?

My ts code and html code respectively

 @Component({
  selector: 'favourite',
  templateUrl: './favourite.component.html',
  styleUrls: ['./favourite.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom
})

<span class="glyphicon" 
[class.glyphicon-star]="isSelected"
[class.glyphicon-star-empty]="!isSelected"
(click)="glyphiconClicked()"></span> 

Since, ShadowDom a new element in ViewEncapsulation enum, I just wanted to see the result. But I am not seeing any result because of the error.

1 Answers

encapsulation: ViewEncapsulation.ShadowDom

Write the above line in the Root component of your application, that you have mentioned in the "bootstrap:[]" Array or "entryComponents:[]" array of your Application module.

Related