Css 使用：主机选择器vs容器div

在我看来，它可以用来替代

容器来设计组件的样式。例如：

使用容器

@组件({
模板：`
一些头衔
一些内容
`,
风格：[`
.集装箱{
边框：1px纯黑；
显示器：flex；
}
`],
})

使用

@组件({
模板：`
一些头衔
一些内容
`,
风格：[`
：主持人{
边框：1px纯黑；
显示器：flex；
}
`],
})

如果我理解正确的话，这两种方法解决的问题完全相同。在几乎每一个组件中都少了一个需要担心的元素和类，这很好

---

问题：这就是

：host

的目的吗？如果没有，那么这有什么意义，除了到处添加容器之外，为组件提供样式的最佳实践是什么？

：host

正在为当前组件（例如

元素）设置包装器元素的样式，正如我所知，这是一种短而舒适的方式来设计这样的元素。

它们不能解决同样的问题

：host

用于设置主机的样式，

.container

用于设置组件中包含

container

类的任何div的样式

由于封装的原因，

.container

div将不可用于在组件外部设置样式，而宿主元素可以设置样式

---

请注意，

display

属性的初始值为

inline

，因此默认情况下，组件将显示为

inline

元素。也许你不想这样，尤其是这可能看起来违反直觉（即使允许）。

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

class.container

• 如果您使用class

  .container

  ，则必须始终保持它们的同步，以防您希望重命名组件。在大型应用程序中，这往往发生在开发的早期阶段
• 此外，这会让您面临名称冲突，特别是如果您没有良好的CSS卫生习惯的话
• 通过覆盖元素类属性，可以在运行时错误地删除它。使用

  element.classList.add（）。删除（）

：主机

• 无需大量键入（有时组件名称可能会变长）
• 无论向元素添加什么类，它都存在。我相信它还必须优先于

  .container

  类
• （仅限Angular）Angular模拟相同的行为，但如果禁用组件封装，则所有

  ：host

  选择器将变得无用，这可能导致使用

  .container

  类

---

你说得对：主体可用于将任何样式应用于当前构件。您也可以使用包装器并为其编写样式。因此，这只是一个偏好的问题，并根据您的要求。如果它只是一个包装器，那么您可以直接使用

：host

@KiranDash这不是偏好的问题，在主机上设置样式可以定义组件的默认

display

属性，默认情况下该属性是

inline

，而将块元素放在inline元素中毫无意义。我想它们不是等价的，但在我的示例中，它们肯定解决了相同的问题（其中我假设只有一个

.container

的实例，它将所有其他内容包装在我的模板中）？不过，

显示的优点是好的！这肯定是我没有考虑到的一个副作用。还有@AdrianMoisa提到的封装。我仍然不确定
：主机
选择器的要点是什么，如果不是为了对那些本来会进入
容器
/
包装器
/
我的组件的东西进行样式化的话ent名称
/
#无论什么
。您不能从组件外部设置
.container
的样式（使用不推荐的
/deep/
选择器除外）。但您可以设置宿主元素的样式。因此，设置宿主元素的样式允许您在组件上设置默认样式。如何在该组件的html@AyushKumar如果我理解正确，它应该是类似于
：host.abc{background color:green；}
或
：主机：：ng deep.abc{背景色：绿色；}
对于某些特定情况。我的意思是：主机对整个组件进行绑定。如果我想应用于该组件中某个div的特定类，该怎么办？例如，我在一个组件中有2个div，我想使用hostbinding的：主机选择器仅切换div1，例如，如果有2个div，则在侧栏.component.html中我只想用一个click@AyushKumar我在
侧栏.component.html
或
侧栏toggle.component.html
中没有看到任何
div
s。
@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;
        }
    `],
})