自定义元素上的CSS选择器

对于直接设置Angular2自定义元素的样式并使用CSS选择器选择它们，是否有任何禁忌症

例如：

// HTML
<My-Page>
    <header></header>
    <main></main>
    <My-Footer class="sticky-footer"></My-Footer>
</My-Page>

// CSS 
My-Page {
    background-color: grey;
}

header {
    ...
}

.sticky-footer {
    position: absolute;
}

//HTML
//CSS
我的页面{
背景颜色：灰色；
}
标题{
...
}
.粘脚{
位置：绝对位置；
}

好的还是坏的做法

您应该使用穿透CSS组合符>>，/deep/和：：shadow

样式：[
`
：host{背景色：灰色；}
：主机>>>标题{
背景：黄色；
}
：主机>>>我的页脚{
位置：绝对位置；
}         
`
],
模板：
`
// 虽然这是完全正确的，但它打破了模块化。组件可以设置其自己的根元素的样式：

my-page.component.css

:host{
  background-color: grey;
}

header {
    ...
}

.sticky-footer {
    position: absolute;
}

这将实现同样的效果，并在组件中包含对MyPageComponent至关重要的CSS。
请注意
>
和
/deep/
（同样的效果）仅适用于angular的模拟阴影DOM。当您切换到本机阴影DOM时，它将中断<代码>：：shadow

和

/deep/

已被弃用。如果我希望将这些样式放置在全局css文件（styles.css）中而不是组件样式中，该怎么办？例如，由于index.html中的root自定义标记，我遇到了一些问题。我基本上需要在RC4中设置height:100%。。这在稳定版本中不再有效。。因此，我必须将父级设置的子组件{..}样式移动到子组件中，作为：host{..}。。希望这对某人有帮助。。

:host{
  background-color: grey;
}

header {
    ...
}

.sticky-footer {
    position: absolute;
}