From 573caaee1b7fe64b57b84e2b287b6c5c74666de1 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Wed, 13 Sep 2023 17:50:40 -0700
Subject: [PATCH] fix(select)!: don't reflect `selected` attribute

Why? This is needed for selects in forms, which uses the `selected` attribute to indicate default selected values when resetting.

BREAKING CHANGE: `option.selected` no longer reflects. Set the attribute instead if relying on the attribute for styles/queries.

PiperOrigin-RevId: 565212026
---
 menu/internal/menuitem/_menu-item.scss           | 6 ++----
 menu/internal/menuitem/forced-colors-styles.scss | 2 +-
 menu/internal/submenuitem/sub-menu-item.ts       | 8 ++++++--
 select/internal/selectoption/select-option.ts    | 9 ++++++++-
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/menu/internal/menuitem/_menu-item.scss b/menu/internal/menuitem/_menu-item.scss
index 0a51310fad..892665d3fd 100644
--- a/menu/internal/menuitem/_menu-item.scss
+++ b/menu/internal/menuitem/_menu-item.scss
@@ -43,10 +43,8 @@
     );
   }
 
-  .list-item {
-    :host([selected]) & {
-      background-color: var(--_selected-container-color);
-    }
+  .list-item.selected {
+    background-color: var(--_selected-container-color);
   }
 
   // Set the ripple opacity to 0 if there is a submenu that is hovered.
diff --git a/menu/internal/menuitem/forced-colors-styles.scss b/menu/internal/menuitem/forced-colors-styles.scss
index 2bbced2497..65784747de 100644
--- a/menu/internal/menuitem/forced-colors-styles.scss
+++ b/menu/internal/menuitem/forced-colors-styles.scss
@@ -10,7 +10,7 @@
 
   // Show double border only when selected, and the current list item does not
   // have a focus ring on it.
-  :host([selected]) .list-item:not(.has-focus-ring)::before {
+  .list-item.selected:not(.has-focus-ring)::before {
     content: '';
     position: absolute;
     inset: 0;
diff --git a/menu/internal/submenuitem/sub-menu-item.ts b/menu/internal/submenuitem/sub-menu-item.ts
index e19a455ca6..8c02d237fe 100644
--- a/menu/internal/submenuitem/sub-menu-item.ts
+++ b/menu/internal/submenuitem/sub-menu-item.ts
@@ -113,7 +113,11 @@ export class SubMenuItem extends MenuItemEl {
   }
 
   protected override getRenderClasses() {
-    return {...super.getRenderClasses(), 'submenu-hover': this.submenuHover};
+    return {
+      ...super.getRenderClasses(),
+      'submenu-hover': this.submenuHover,
+      selected: this.selected
+    };
   }
 
   /**
@@ -370,4 +374,4 @@ function callIfEventNotBubbledThroughMenu(
     // invoke the callback because we have not run into a submenu.
     await callback(event);
   };
-}
\ No newline at end of file
+}
diff --git a/select/internal/selectoption/select-option.ts b/select/internal/selectoption/select-option.ts
index f4f89018b6..fd1e98f92e 100644
--- a/select/internal/selectoption/select-option.ts
+++ b/select/internal/selectoption/select-option.ts
@@ -26,7 +26,7 @@ export class SelectOptionEl extends MenuItemEl implements SelectOption {
   /**
    * Whether or not this option is selected.
    */
-  @property({type: Boolean, reflect: true}) selected = false;
+  @property({type: Boolean}) selected = false;
 
   override readonly type: ListItemRole = 'option';
 
@@ -65,4 +65,11 @@ export class SelectOptionEl extends MenuItemEl implements SelectOption {
       }
     }
   }
+
+  protected override getRenderClasses() {
+    return {
+      ...super.getRenderClasses(),
+      selected: this.selected,
+    };
+  }
 }