From a87f3627bb85778699de6eabf265ffe64a3674df Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 8 Jan 2025 14:22:06 -0500
Subject: [PATCH] Fix #451 without changing logic/specificity

---
 src/styles/native/input.css  | 13 +++++++++++--
 src/styles/native/select.css |  7 ++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/styles/native/input.css b/src/styles/native/input.css
index 251f43084..246812a7a 100644
--- a/src/styles/native/input.css
+++ b/src/styles/native/input.css
@@ -14,13 +14,22 @@ input:where(:not(
     [type='reset'],
     [type='submit']
   )) {
-  &:not(:host *) {
+  /* Styling root, i.e. excluding elements within a host.
+     This is so that these properties can be overridden.
+   */
+  &:not(:host *),
+  /* Safari and FF don't like :host:not(:host *) or :where(:host) so we need to add :host explicitly.
+    However, we can't just specify :host, because then it would become & :host which matches nothing.
+    :host(*) is the same as :host and the & prevents it from becoming a descendant selector.
+   */
+  :host(:is(&, *)) {
     /* Defaults for root element. */
     --outlined-background-color: var(--wa-form-control-background-color);
     --outlined-border-color: var(--wa-form-control-border-color);
     --outlined-text-color: var(--wa-form-control-value-color);
 
-    :where(&) {
+    :where(&),
+    :host(:where(&, *)) {
       /* Defaults with 0 specificity.
        * Do NOT reset --background-color and --border-color here so they trickle in from the appearance utils
        * Instead we provide the fallback when setting
diff --git a/src/styles/native/select.css b/src/styles/native/select.css
index c0e7de343..455b70aa1 100644
--- a/src/styles/native/select.css
+++ b/src/styles/native/select.css
@@ -6,7 +6,12 @@ label:has(select),
   --outlined-border-color: var(--wa-form-control-border-color);
   --outlined-text-color: var(--wa-form-control-value-color);
 
-  :where(&) {
+  /* Safari and FF don't like :where(:host) so we need to add :host explicitly.
+    However, we can't just specify :host, because then it would become & :host which matches nothing.
+    :host(*) is the same as :host and the & prevents it from becoming a descendant selector.
+   */
+  :where(&),
+  :host(:where(&, *)) {
     /* Defaults with 0 specificity.
        * Do NOT reset --background-color and --border-color here so they trickle in from the appearance utils
        * Instead we provide the fallback when setting