如何将样式应用于角度中的阴影根元素

Question

我正在使用 Angular 12，我想对输入字段应用一些样式，该输入字段是group-search-field元素的影子根元素。

我尝试使用 ng-deep 如下所示，但它不起作用

:host ::ng-deep input {
  background: red !important;
}

有人可以指导我吗？

Answer 1

由于样式隔离（Shadow DOM 的一个功能），您无法定义将在 Shadow DOM 范围内应用的全局 CSS 规则。在你的情况下，我认为background:red不会传播到被影子根中的元素继承，这就是为什么:host不起作用。

super();
const shadowRoot = this.attachShadow({ mode: 'open' });
const sheet = new CSSStyleSheet;
sheet.replaceSync( `input { background: red !important; }`)
shadowRoot.adoptedStyleSheets = [ sheet ];

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM