将CSS plus选择器与自定义组件一起使用

Question

在CSS中，可以使用加号选择器选择一个在另一个元素之后的元素。例如，选择div之后的所有h1：

h1 + div {
    margin-top: 1rem;
}

如何从影子DOM（或者在Angular的情况下为虚拟影子DOM）内部做同样的事情？也就是说，如何在父组件中遵循自定义组件的样式条件？

我尝试像这样使用:host-context()，但是没有用：

:host-context(h1 +) {
    margin-top: 1rem;
}

我知道我可以使用常规CSS在阴影之外定义此样式，但我想保留封装并在阴影本身内部进行定义。

Answer 1

您可以尝试使用:: ng-deep选择阴影DOM元素。这将禁用此规则的封装，仅 ，但允许您组件的视图封装保持启用状态，除非您进行更改。

::ng-deep h1 + div { 
  /* styles */
}