使用 :host 选择器与容器 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;
        }
    `],
})

如果我没理解错的话，这两个解决的问题完全一样。少一个元素真是太好了，class 几乎每个组件都需要担心。

问题：这是 :host 的目的吗？如果不是，它有什么意义？除了在各处添加容器之外，为组件提供样式的最佳实践是什么？

Answer 1

:host 正在为当前组件（例如 <app-header> 元素）设置包装器元素的样式，据我所知，这是一种为这样的元素设置样式的简短而舒适的方法。

Answer 2

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

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

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

Answer 3

我还将在当前答案中添加以下观察结果：

class.容器

如果您使用 class .container，那么您必须始终保持它们同步，以防您希望重命名您的组件。在大型应用程序中，这往往发生在开发的早期阶段。
此外，如果您没有良好的 CSS 卫生习惯，这也会让您面临名称冲突的风险。
它可能会在运行时通过覆盖元素 class 属性被错误删除。使用 element.classList.add(); .remove()

:主机

让您免于大量输入（有时组件名称可能会很长）
无论您向元素添加什么 classes，它都会存在。我相信它也必须优先于 .container class.
(Angular only) Angular 模拟相同的行为，但如果禁用组件封装，所有 :host 选择器都将变得无用，这可能导致使用 .container class.

使用 :host 选择器与容器 div

Use of :host selector vs container div

css

web-component

angular

使用容器

使用:host