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

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元素。这将禁用此规则的封装only，但允许您组件的视图封装保持启用状态，除非您对其进行更改。

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