Я пытаюсь использовать селектор :first-child() внутри Shadow DOM, сгенерированного из углового компонента.К сожалению, это не работает, потому что первый дочерний элемент в теневом корне всегда является тегом style.
Я пробовал :first-child и :first-of-type.Оба не будут работать, потому что, хотя все мои элементы имеют общий класс .card, они используют различные элементы HTML для семантики: header, main и footer.
Исходный html для компонента Angular:
<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>, но это выглядит как обходной путьмне.Почему я не могу рассматривать теневой корень как контейнер для упаковки?