HTML i CSS · Senior · Pytanie 24 z 75
Jak ostylować wnętrze Web Componentu, gdy Shadow DOM izoluje jego style?
- 1Selektorami globalnymi z
!important- przebijają shadow root - ✓Poprawna odpowiedź: Przez zmienne CSS (dziedziczą się przez granicę) i
::part() - 3Nie da się: Shadow DOM całkowicie zabrania stylowania z zewnątrz
Wyjaśnienie
Zewnętrzne selektory nie sięgają do shadow root, nawet z !important. Ale właściwości dziedziczone (color, font) i właściwości niestandardowe przechodzą przez granicę - na nich buduje się motywy. Autor komponentu może wystawić części przez part="label", stylowane z zewnątrz przez my-el::part(label). Treść w slotach (light DOM) styluje się zwykłym CSS.