Skip to main content

CSS Shadow Parts

CSS Shadow Parts je funkcia, ktorá umožňuje vývojárom štylizovať špecifické časti Shadow DOM . Toto je užitočné v prípade WebJET Elements postavených na technológii Web komponentov, kde by v opačnom prípade zapúzdrenie neumožnilo upraviť vzhľad vnútorných častí elementov.

Výhody Shadow parts​

Shadow Parts poskytujú spôsob, ako vystaviť špecifické prvky v rámci Shadow DOM pre účely štylizácie, pričom sa zachovávajú jeho výhody zapuzdrenia a izolácie podľa Shadow DOM špecifikácie. Tým pádom nehrozí prenos štýlov z komponentov a ich neúmyselnému použitiu na iné elementy.

Použitie Shadow parts​

Pri použití Web komponentov so Shadow DOM, nie je možné zacieliť vnútorné časti komponenty pomocou CSS selektora. Ako sme si vysvetlili vyššie, všetko vo vnútri Shadow DOM je izolované od zbytku aplikácie. V príklade nižšie je zobrazené to, akým spôsobom je vykreslená komponenta wj-select.

<wj-button>
  #shadow-root
  <button class="button-native" part="native"></button>
</wj-button>

Element button vo vnútri #shadow-root je zapúzdrený a preto CSS selektor nižšie nebude fungovať.

/* Nefunkčný selektor */
wj-button .button-native {
  color: blue;
}

Tento problém riešia CSS Shadow Parts. V komponente wj-button sa nachádza atribút part s hodnotou, ktorú je možné v css zacieliť pomocou css pseudo-elementu::part(). V tomto prípade je to hodnota native.

Funkčný css selektor by preto vyzeral nasledovne:

wj-button::part(native) {
  color: blue;
}

Viac informácii o tom ako

How ::part works​

The ::part() pseudo-element allows developers to select elements inside of a shadow tree that have been exposed via a part attribute.

Since we know that ion-select exposes a placeholder part for styling the text when there is no value selected, we can customize it in the following way:

ion-select::part(placeholder) {
  color: blue;
  opacity: 1;
}

Štýlovanie pomocou ::part umožňuje zmeniť akúkoľvek vlastnosť CSS, ktorú daný element akceptuje.

WebJET Elements parts​

All exposed parts for an Ionic Framework component can be found under the CSS Shadow Parts heading on its API page. To view all components and their API pages, see the Component documentation.

Limitácie​

Kompatibilita s prehliadačmi​

Shadow Parts CSS fungujú v najnovších verziách všetkých významných prehliadačov. Staršie verzie prehliadačov ich však nemusia podporovať. Pred použitím Shadow Parts vo svojej aplikácii skontrolujte kompatibiltu s prehliadačom a uistite sa, že vyhovuje vašim požiadavkám. Ak potrebujete podporovať staršie prehliadače, zvážte namiesto toho pre úpravu štýlov CSS Premenné.

Podpora prehliadačom prefixovaných pseudoelementov​

Vendorom prefixované

pseudoelementy nie sú v súčasnosti podporované. Preto napríklad ::-webkit-scrollbar pseudoelement v príklade nižšie nebude funkčný.

/* Nie je podporovaný */
my-component::part(scroll)::-webkit-scrollbar {
  background: green;
}

See this issue on GitHub for more information.

Štrukturálne pseudotriedy​

Väčšina pseudotried je podporovaná pomocou častí, avšak štrukturálne pseudotriedy nie sú podporované. Príklad štrukturálnych pseudotried, ktoré nefungujú, je uvedený nižšie.

/* Nie je podporovaný */
my-component::part(container):first-child {
  background: green;
}

/* Nie je podporovaný */
my-component::part(container):last-child {
  background: green;
}

Reťazenie viacerých Parts​

Pseudoelement ::part() nemôže reťaziť viacero selektorov ::part(). Je to preto, aby sa zabránilo exponovaniu nadbytočného obsahu komponenty. Ak potrebujete zacieliť na konkrétnu časť, použite priamo hodnotu danej part.

/* Nie je podporovaný */
my-component::part(button)::part(label)

Content