css - 为什么 angular 2 组件会影响它托管的实际 html 的样式？

Question

我创建了一个基于此处列出的 Material 卡的组件(从 Jquery 迁移) https://github.com/marlenesco/material-cards

我注意到一件事，卡片的样式不正确 - 如下所示: https://ibb.co/cg28hm .

看来问题出在 app-component html 元素上。

当我编辑 HTML - 我尝试了两件事:

1. 删除了组件收到的所有“附加”样式 - 没有用。
2. 删除了组件的实际“html 标签”- 然后一切正常。

这意味着，当我从以下位置手动删除“app-component”时:

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

到

   <div>... </div>

卡片的样式正确。

知道为什么会发生这种情况吗？

Answer 1

发现了问题，当然添加的新组件破坏了 CSS(因为它是一个使用层次结构的复杂 CSS，突然一个“app-component”标签停止了 css 层次结构..)，所以我已经刚刚使用的指令:

selector: '[app-component]',

在组件中:

<div app-component> </div>