如何在 Angular2 中为 WebComponents 添加样式

Question

我有一个名为my-element 的简单元素，我希望在相邻的my-elementss 之间有2em 垂直空间。所以我添加了一个样式

my-element + my-element { margin-top: 2em; }

我的问题是，这行得通吗？ my-element 是一个 WebComponent，我在我的 Angular2 组件中将其声明为 ViewEncapsulation.Native，这意味着样式在 Shadow DOM 中是隔离的并且不能更改，或者至少在不应用 /deep/ 选择器的情况下不能更改（？ ) 由于边距在my-element 的框模型内，我假设对my-element 应用边距实际上根本不应该影响my-element。这基本上就是我正在经历的。

那么我如何让我的my-element 至少允许更改margin，因为它不会影响包含框的呈现？

Answer 1

您可以设置直接子代的样式。如果 <my-element></my-element> 在 Angular2 组件的视图中，那么您可以从添加到 Angular2 组件的样式中为其设置样式。

您不能为<my-element> 的内容设置样式，但您可以添加<my-element> 本身的样式属性。

ViewEncapsulation.Native 没有/deep/。 Deep 在 Chrome 中已被弃用，并且从未添加到其他浏览器中。

使用ViewEncapsulation.Emulated（默认），您可以使用/deep/，因为Angular2 模拟它。