ViewEncapsulation.ShadowDom 不工作答案

【问题标题】：ViewEncapsulation.ShadowDom is not workingViewEncapsulation.ShadowDom 不工作
【发布时间】：2019-06-05 05:47:43
【问题描述】：

我正在使用 Angular 7 和 bootstrap 3.3.7（为了用户 glyphicon）。我正在尝试在我的组件中使用 ViewEncapsulation.ShadowDom。但我收到一个错误“错误 DOMException：无法在 'Element' 上执行 'attachShadow'：此元素不支持 attachShadow”。谁能解释一下，为什么我会收到这个错误？

我的ts代码和html代码分别

 @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>

既然，ShadowDom 是 ViewEncapsulation 枚举中的一个新元素，我只是想看看结果。但由于错误，我没有看到任何结果。

【问题讨论】：

暂时不要使用它，因为 shadow dom 在 FF、IE 和 CHROME 中的行为不同。

标签： angular shadow-dom

【解决方案1】：

封装：ViewEncapsulation.ShadowDom

将上述行写入应用程序的根组件中，即您在应用程序模块的“bootstrap:[]”数组或“entryComponents:[]”数组中提到的。

【讨论】：