diff --git a/Converting-Scoped-to-Shadow.md b/Converting-Scoped-to-Shadow.md new file mode 100644 index 0000000..5405d67 --- /dev/null +++ b/Converting-Scoped-to-Shadow.md @@ -0,0 +1,35 @@ +## 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** + +```css +/* 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)** + +```css +/* 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** + +```css +/* 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) { +```