爲什麼角度2組件影響它託管的實際html的樣式？

Question

我已經創建了一個基於這裏列出（從jQuery的遷移） https://github.com/marlenesco/material-cards

有一兩件事我注意到的材料卡上的組件，該卡的造型是不是右爲在這裏看到： https://ibb.co/cg28hm。

看來應用程序組件html元素是這裏的問題。

當我編輯的HTML - 我想兩兩件事：

1. 刪除了所有「額外」的造型爲組件接收 - 沒有工作。
2. 刪除了組件的實際「html標籤」 - ，然後一切正常。

這意味着，當我從手動刪除 「應用組分」：

<app-component _ngcontent-c0 _nghost-c1> 
    <div>... </div> 
<app-component> 

到

<div>... </div> 

卡是在其正確的風格。

任何想法，爲什麼這甚至發生？

Answer 1

發現了這個問題，當然新增加的組件會遺失CSS（因爲它是一個使用hirarchies的複雜CSS，並且突然出現一個「app-component」標籤會停止css hirarchy ..）剛纔已經使用的指令：

selector: '[app-component]', 

，並在組件：

<div app-component> </div>