时间戳

首页 > 解决方案 > 将 CSS plus 选择器与自定义组件一起使用

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

问题描述

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

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

你怎么能在影子 DOM（或者在 Angular 的情况下，虚拟影子 DOM）中做同样的事情？也就是说，您如何根据父组件中的内容有条件地设置自定义组件的样式？

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

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

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

标签： cssangularcss-selectorsshadow-dom

解决方案

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

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

推荐阅读