Верстка · Senior · Запитання 24 з 75
Як стилізувати внутрішню частину Web Component, якщо стилі ізольовані Shadow DOM?
- 1Глобальними селекторами з
!important- вони проникають у shadow root - ✓Правильна відповідь: Через CSS-змінні (успадковуються крізь межу) і
::part() - 3Ніяк: Shadow DOM повністю забороняє будь-яку зовнішню стилізацію
Пояснення
Зовнішні селектори не проникають у shadow root, навіть з !important. Але успадковувані властивості (color, font) і custom properties проходять межу - на них будують темізацію. Автор компонента може відкрити частини через атрибут part="label", а ззовні їх стилізують my-el::part(label). Вміст слотів (light DOM) стилізується звичайним CSS.