1

在 Angular 2 中，我试图从其容器的样式表中设置组件实例的样式

<my-container>
  <my-component>
    <span>some text</span>
  </my-component>
</my-container>

很显然，我已经ViewEncapsulation.None入驻了my-component.ts。

我的容器样式：

:host /deep/ span {
  color: red;
}

基本上我很困惑，禁用 ViewEncapsulation 后，选择器仍然需要/deep/跨度来获取红色样式。除此之外，我有点不确定我应该使用哪种类型的选择器，/deep/并且::shadow据说已被弃用。战场上剩下的，似乎只有三重>合体了>>>。

反过来，手写笔或 WebStorm 似乎都不支持/理解这一点。结果是重新格式化代码完全破坏了样式代码。

除了我正在使用的方法之外，还有其他方法可以为我的 span 元素编码 css/styl 选择器吗？

编辑

在尝试研究未来的计划时，我查看了规范草案- 就在第 3.2.6 节之前，它说：

对于外部文档中的样式表，选择器 x-foo >>> span 选择所有三个元素：#top、#not-top 和 #nested。

但随后它指出：

穿透阴影的后代组合器是选择器的静态配置文件的一部分，而不是动态配置文件的一部分。这意味着它可以在例如 querySelector() 方法中使用，但在 stylesheets 中使用时无效。

我不明白。

4

0 回答 0