css - 使用 :host selector vs container 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;
        }
    `],
})

使用:host

@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 的样式。

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

请注意，display 属性的初始值为 inline，因此默认情况下，您的组件将显示为 inline 元素。也许你不想要那个，尤其是 if you have a block element inside of it这可能看起来违反直觉(即使它是允许的)。