Angular组件能否映射到CSS Grid区域？具体实现方法是什么？

我通过HTML/CSS搭建了包含header、search、filters、results四个区域的CSS Grid布局，原始布局代码如下：

#whole {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
  
    grid-template-areas:
      "header"
      "search"
      "filters"
      "results";
  }
  /* 笔记本及更宽屏幕下，搜索和筛选模块并排展示 */
  @media screen and (min-width: 760px) {
    #whole {
      display: grid;
      grid-template-columns: 33% auto;
      grid-template-rows: auto 15% auto;
  
      grid-template-areas:
        "header  header header"
        "search  filters filters"
        "results results results";
    }
}

现在需要将对应的CSS和HTML拆分到Angular组件中，让每个组件对应上述一个Grid区域。调试header组件时发现，按规则header应始终占满整行，但目前仅占第一列。
header.component.css代码如下：

header {
  grid-area: header;
  width: 100%;
  color: var(--tertiary);
}

当前header仅占满第一列的100%宽度，已设置ViewEncapsulation.None但仍未生效。

• 首先修正Grid布局定义错误
  760px以上断点中，你声明的grid-template-columns: 33% auto仅设置了2列，但grid-template-areas写了3列的区域分配，两者不匹配，需要统一为2列：

@media screen and (min-width: 760px) {
  #whole {
    display: grid;
    grid-template-columns: 33% auto;
    grid-template-rows: auto 15% auto;
    grid-template-areas:
      "header  header"
      "search  filters"
      "results results";
  }
}

• 给Angular组件宿主元素设置grid-area
  CSS Grid的区域分配是作用于网格容器的直接子元素，Angular组件会自带一层宿主标签作为#whole容器的直接子元素，你之前把grid-area: header写在组件内部的<header>标签上，宿主元素没有分配区域，自然无法正确占位。
  你可以用:host选择器给宿主设置样式，修改header.component.css如下：

:host {
  grid-area: header;
  width: 100%;
}
header {
  color: var(--tertiary);
  /* 其余header内部样式保留即可 */
}

不需要额外设置ViewEncapsulation.None，:host选择器默认可以选中当前组件的宿主元素。

• 其余组件同理配置
  search、filters、results组件分别在对应组件的CSS中，给:host选择器设置grid-area: search、grid-area: filters、grid-area: results即可。

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