Shadow DOM путает со стилем - цвет фона не работает должным образом на теневых элементах (angular) - PullRequest
Новая
       3

Shadow DOM путает со стилем - цвет фона не работает должным образом на теневых элементах (angular)

0 голосов
/ 14 марта 2020

Мне трудно понять, как: элементы хоста должны быть стилизованы

ex: 

// toggle.component.html
<p>toggle works!</p>

//toggle.component.scss
:host {
  background-color: rgba(255, 0, 0, 0.3);
}

Этот цвет фона не отображается, пока я не надену это любое свойство отображения, такое как block или inline-block, даже если элемент явно занимает пространство, содержащее этот элемент p внутри

Это вызывает у меня большую путаницу, особенно когда приходится стилизовать связанные вещи в разных компонентах (пример: I иметь таблицу компонентов с другими подчиненными пользовательскими компонентами, такими как table-row и table-header, которые я не могу стилизовать, как обычно, потому что эти элементы dom dom всегда находятся посередине)

Почему он действует как который? Как мне адаптироваться к этим теневым домам в случае ex: table? Любая ссылка на ресурс будет высоко оценена

РЕДАКТИРОВАТЬ: я только что обнаружил, что использование что-то вроде height: 50% на элемент на верхнем уровне подкомпонента принимает. высота относительно первого элемента, который он находит после элемента shadow вместо самого элемента shadow ?? ПОЧЕМУ?? Где это объяснено?

По-прежнему возникает эта проблема, трудно стилизовать сетку

1 Ответ

0 голосов
/ 16 марта 2020

Итак, я обнаружил, что теневые DOM-элементы имеют встроенный дисплей по умолчанию, я не знал этого, я думал, что это display: block, так как это тот, кто имеет больше смысла

Так что вы необходимо выполнить :host { display: block } для каждого компонента, чтобы иметь согласованное поведение

Начиная с Angular 9.1.0, будет возможность генерировать компоненты уже с отображением блока

...