feat(action-sheet, loading, modal, picker, popover): pass HTML attributes to host element (#23929)

core/src/components/picker/picker.tsx

@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
-import { AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface, PickerButton, PickerColumn } from '../../interface';
+import { AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface, PickerAttributes, PickerButton, PickerColumn } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
 import { getClassMap } from '../../utils/theme';
 
@@ -81,6 +81,11 @@ export class Picker implements ComponentInterface, OverlayInterface {
    */
   @Prop() animated = true;
 
+  /**
+   * Additional attributes to pass to the picker.
+   */
+  @Prop() htmlAttributes?: PickerAttributes;
+
   /**
    * Emitted after the picker has presented.
    */
@@ -213,11 +218,16 @@ export class Picker implements ComponentInterface, OverlayInterface {
   }
 
   render() {
+    const { htmlAttributes } = this;
     const mode = getIonMode(this);
     return (
       <Host
         aria-modal="true"
         tabindex="-1"
+        {...htmlAttributes as any}
+        style={{
+          zIndex: `${20000 + this.overlayIndex}`
+        }}
         class={{
           [mode]: true,
 
@@ -226,9 +236,6 @@ export class Picker implements ComponentInterface, OverlayInterface {
 
           ...getClassMap(this.cssClass)
         }}
-        style={{
-          zIndex: `${20000 + this.overlayIndex}`
-        }}
         onIonBackdropTap={this.onBackdropTap}
         onIonPickerWillDismiss={this.dispatchCancelHandler}
       >