为何仅使用:host选择器无法将组件背景设为红色？

• :host选择器的作用：它选中的是Angular组件的宿主元素——也就是在父模板里引用组件时生成的那个自定义标签元素。

• 为什么单独用:host看不到红色背景：
  Angular组件的宿主元素默认是inline显示模式。inline元素的背景只会覆盖自身的内容区域（比如行内文字、inline子元素的范围），而组件内部的.background-div是块级元素，块级元素不会撑开inline类型的宿主元素的高度和宽度——宿主元素的高度由行高决定，宽度由行内内容决定，大概率是个极小的区域，所以背景色根本看不到。

• 为什么:host .background-div能生效：
  这个选择器是选中宿主元素内部的.background-div块级元素，给它设置背景色。块级元素会自动占满可用宽度，并且根据自身内容撑开高度，所以红色背景能正常显示。

如果想让:host的背景色生效，只需要给宿主元素设置块级显示模式就行，比如：

styles: [
  `
  :host {
    display: block;
    background-color: red;
  }
  `
]

内容的提问来源于stack exchange，提问作者Ole