如何在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組件的視圖中，那麼您可以根據添加到Angular2組件的樣式對其進行設置。

你不能的是風格的內容<my-element>，但你可以添加<my-element>本身的風格屬性。

與ViewEncapsulation.Native沒有/deep/。 Chrome中已棄用Deep，並且從未添加到其他瀏覽器。

使用ViewEncapsulation.Emulated（默認），您可以使用/deep/，因爲Angular2模擬它。