有没有办法在影子国家中选择实际的第一个孩子？

Question

我正在尝试在从Angular组件生成的Shadow DOM中使用:first-child()选择器。不幸的是，这是行不通的，因为影子根中的第一个孩子始终是style标记。

我已经尝试过:first-child和:first-of-type。两者都不起作用，因为尽管我所有项目都共享.card类，但是它们使用不同的HTML元素来表示语义：header，main和footer。

Angular组件的源html：

<header class="card header">
   <h1>this is header</h1>
</header>

<main class="card main">
   <h1>this is main</h1>
</main>

样式摘录

.card {
    padding: ($card-padding / 2) $card-padding;

    &:first-child {
        padding-top: $card-padding;
    }

    &:last-of-type {
        padding-bottom: $card-padding;
    }
}

生成的影子根

<ng-component>
#shadow-root
  <style>...</style>
  <header class="card header">...</header>
  <main class="card main">...</main>
</ng-component>

我希望顶部填充为前.card的常规填充的两倍，底部填充为后.card的常规填充的两倍。

我知道我可以将全部内容包装在<div>中，但这对我来说似乎是一种解决方法。为什么我不能将卷影根当作包装容器？