Angular2のWebComponentsにスタイルを追加する方法

Question

私はmy-elementと呼ばれる単純な要素を持っています。隣接するmy-elementsの間には、2emの垂直スペースがあります。だから私はスタイリングを追加する

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

私の質問は、これは動作しますか？ my-elementはWebComponentで、私はAngular2 ComponentでViewEncapsulation.Nativeと宣言しています。これは、スタイリングがシャドー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（デフォルト）では、Angular2がエミュレートするため、/deep/を使用できます。