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组合器＆gt;＆gt;＆gt;，/ deep /和:: 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
`

自定义元素上的CSS选择器

2 个答案: