为什么角度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>