css - 如何在 Angular2 中为 WebComponents 添加样式

Question

我有一个名为 my-element 的简单元素，我希望在相邻的 my-elements 之间有 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 组件的 View 中，那么您可以从添加到 Angular2 组件的样式中设置它的样式。

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

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

与 ViewEncapsulation.Emulated (默认)，你可以使用 /deep/因为 Angular2 模拟了它。