我有一个名为my-element的简单元素，我希望相邻的2em之间有my-elements个垂直空间。所以我添加了样式
my-element + my-element { margin-top: 2em; }
我的问题是，这会有效吗？ my-element是一个WebComponent，我已经在我的Angular2组件中将其声明为ViewEncapsulation.Native，这意味着样式在Shadow DOM中被隔离，无法更改，或者至少没有应用{/deep/。 1}}选择器（？）
由于保证金属于my-element的框模型，我认为对my-element应用保证金实际上根本不应影响my-element。这基本上就是我所经历的。
那么如何让my-element至少允许更改margin，因为它不会影响包含框的呈现？
答案 0 :(得分：0)
您可以为直接儿童设计样式。如果<my-element></my-element>在Angular2组件的视图中，那么您可以从添加到Angular2组件的样式中设置样式。
您不能设置<my-element>的内容样式，但您可以添加<my-element>本身的样式属性。
ViewEncapsulation.Native没有/deep/。 Deep已在Chrome中弃用，但从未添加到其他浏览器中。
使用ViewEncapsulation.Emulated（默认值），您可以使用/deep/，因为Angular2会模仿它。