From b025eeb223ca0dae2f01f92d3c42cdd90ccafacd Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 7 Jul 2021 16:50:55 -0400 Subject: [PATCH] Created Converting Scoped to Shadow (markdown) --- Converting-Scoped-to-Shadow.md | 35 ++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 Converting-Scoped-to-Shadow.md 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) { +```