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

@@ -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.

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;

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);
   };
-}
+}

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,
+    };
+  }
 }