自定义元素上的CSS选择器

Question

直接设置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;
}

好还是不好的做法？

Answer 1

虽然这是完全有效的，但它破坏了模块化。组件可以设置自己的根元素的样式：

my-page.component.css

:host{
  background-color: grey;
}

header {
    ...
}

.sticky-footer {
    position: absolute;
}

这将实现相同的功能，并在组件中包含对MyPageComponent至关重要的CSS。

Answer 2

您应该使用阴影穿透CSS组合符>>>、//和::shadow

styles: [
    `
     :host { background-color: grey; }

     :host >>> header{
       background:yellow;
     }

     :host >>> My-Footer{  
       position: absolute;
     }         
    `
],
template:
`
<My-Page>  //<----no need as this becomes your :host

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

</My-Page> //<----no need
`