在 shadow-root 中插入组件时不应用角度样式答案

【问题标题】：Angular styles not applying when insert component inside shadow-root在 shadow-root 中插入组件时不应用角度样式
【发布时间】：2021-09-22 11:25:24
【问题描述】：

在我的应用程序中，我使用显示在 shadow-root 中的小部件，并且在它内部有一个带有 id 的 div，我需要在其中插入我的组件。喜欢：

<widget>
  #shadow-root (open)
    ....
    <div id='container'> // need to insert component here // </div>
    ...
</widget>

现在，test.html 我有简单的

<div #test>It works!</div>

在小部件设置中，我可以将这个<div id='container'></div> 作为参数并将其传递给我的组件，所以test.ts 看起来像

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class Test implements OnInit, AfterViewInit {
  @Input() container: HTMLDivElement,
  @ViewChild('test', { static: true }) test: ElementRef;

  ngAfterViewInit(): void {
    const testElement = this.test.nativeElement;
    container.appendChild(testElement);
  }
}

问题是当它插入到 shadow-root 时，它看不到来自 test.component.less 的样式。我试过:host{}:host ::ng-deep {}还是不行。

所以我的问题是 - 有没有办法将 test.component.less 中的样式应用到我的 .html 文件中，而它位于 shadow-root 中？

非常感谢您的帮助！

【问题讨论】：

标签： html angular typescript sass shadow-dom

【解决方案1】：

也许您需要将视图封装设置为无

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None
})

希望对你有所帮助。

【讨论】：

抱歉，希望有人能帮忙:)