Angular 5 中的样式问题

用了别人写的指令，里面返回了html标签。傻傻的，在Angular 5的component中定义了样式，但是样式就是不起作用，不起作用有没有！那种无奈的感觉，chrome查看，居然是

user agent stylesheet

起作用。 user agent stylesheet可是浏览器的默认样式，随便一个样式都能覆盖，我定义的样式怎么没用呢？为什么不覆盖呢？

查看HTML元素的样式表，发现 定义的样式后面都加了个 _ngcontent-c#

这是Angular为了区分自己的样式，特意加的标记。

例如：

ComponentA
<span></span>
<comp-b></comp-b>

ComponenB
<h1></h1>

实际渲染会变成：

<comp-a>
    <span _ngcontent-c0></span>
    <comp-b _ngcontent-c0>
        <h1 _ngcontent-c1></h1>
    </comp-b>
</comp-a>

如果在component中定义了样式，也会在渲染的样式表中加上

_ngcontent-c0

但如果指令返回了html标签，则不会添加该标记，然后样式就匹配不上了。

最后，直接在index.html中定义样式，解决问题。