使用:主机选择器vs容器div

Question

我看到它的方式,它可以用作<div>容器的替代品,用于样式化组件.例:

使用容器

@Component({
    template: `
        <div class="container">
            <h1>Some Title</h1>
            <p>Some Content</h1>
        </div>
    `,
    styles: [`
        .container {
            border: 1px solid black;
            display: flex;
        }
    `],
})

使用:主机

@Component({
    template: `
      <h1>Some Title</h1>
      <p>Some Content</h1>
    `,
    styles: [`
        :host {
            border: 1px solid black;
            display: flex;
        }
    `],
})

如果我理解正确,这两个解决了完全相同的问题.并且很少有一个元素和类可以在几乎每个组件中担心.

问题:这:host是针对的吗？如果没有,它的重点是什么,除了在任何地方添加容器之外,为组件提供样式的最佳实践是什么？

Answer 1

他们解决的不是同一个问题。:host用于设置主机的样式，.container用于设置container组件内具有该类的任何 div 的样式。

由于封装， div.container将无法用于组件外部的样式，而宿主元素可以设置样式。

display请注意，该属性的初始值为inline，因此默认情况下您的组件将显示为inline元素。也许您不希望这样，特别是如果您内部有一个块元素，这可能看起来违反直觉（即使它是允许的）。