javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-12-09 14:22:33 +08:00
Code Issues Packages Projects Releases Wiki Activity
Page: Converting Scoped to Shadow
Pages
Accessibility Button States Converting Scoped to Shadow Home Ionic Framework Wiki RTL Test Page Utilities
Clone
1
Converting Scoped to Shadow
Liam DeBeasi edited this page 2021-07-07 16:50:55 -04:00
Table of Contents

Converting Scoped to Shadow

CSS

There will be some CSS issues when converting to shadow. Below are some of the differences.

Targeting host + slotted child

/* IN SCOPED */
:host(.ion-color)::slotted(ion-segment-button)

/* IN SHADOW*/
:host(.ion-color) ::slotted(ion-segment-button)

Targeting host-context + host (with a :not)

/* IN SCOPED */
:host-context(ion-toolbar.ion-color):not(.ion-color) {

/* IN SHADOW */
:host-context(ion-toolbar.ion-color):host(:not(.ion-color))  {

Targeting host-context + host (with a :not) > slotted child

/* IN SCOPED */
:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(ion-segment-button) {

/* IN SHADOW*/
:host-context(ion-toolbar:not(.ion-color)):host(:not(.ion-color)) ::slotted(ion-segment-button) {
Button States
Accessibility
RTL
Converting Scoped to Shadow
Utilities