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

Posted 2023-03-06

【中文标题】将 CSS plus 选择器与自定义组件一起使用

【英文标题】：Using CSS plus selector with custom components

【发布时间】：2020-04-02 18:54:22

【问题描述】：

在 CSS 中，您可以使用加号选择器来选择跟在另一个元素之后的元素。例如，选择h1s 之后的所有divs：

h1 + div 
    margin-top: 1rem;

你如何在 shadow DOM（或者 Angular 的虚拟 shadow DOM）内部做同样的事情？也就是说，如何根据父组件中的内容来有条件地设置自定义组件的样式？

我尝试像这样使用:host-context()，但它不起作用：

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

我知道我可以使用常规 CSS 在阴影之外定义这种样式，但我想保持封装并在阴影本身内部定义它。

【参考方案1】：

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

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