feat(ui5-option): provide stableDomRef (#2366)

Fixes: #1718

Author: fifoosid

packages/main/src/Option.js

@@ -43,6 +43,15 @@ const metadata = {
 		value: {
 			type: String,
 		},
+
+		/**
+		 * Defines the stable selector that you can use via getStableDomRef method.
+		 * @public
+		 * @since 1.0.0-rc.10
+		 */
+		stableDomRef: {
+			type: String,
+		},
 	},
 	slots: {
 		"default": {

packages/main/src/Select.js

@@ -243,6 +243,15 @@ const metadata = {
  * Once the drop-down is opened, you can use the <code>UP</code> and <code>DOWN</code> arrow keys
  * to navigate through the available options and select one by pressing the <code>Space</code> or <code>Enter</code> keys.
  * <br>
+ *
+ * <h3>Stable DOM Refs</h3>
+ *
+ * In the context of <code>ui5-select</code>, you can provide a custom stable DOM ref for:
+ * <ul>
+ * <li>Every <code>ui5-option</code> that you provide.
+ * Example: <code><ui5-option stable-dom-ref="option1"></ui5-option></code></li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents/dist/Select";</code>
  * <br>
@@ -361,6 +370,7 @@ class Select extends UI5Element {
 				value: opt.value,
 				textContent: opt.textContent,
 				id: opt._id,
+				stableDomRef: opt.stableDomRef,
 			};
 		});
 

packages/main/src/SelectPopover.hbs

@@ -51,6 +51,7 @@
 					icon="{{this.icon}}"
 					?selected="{{this.selected}}"
 					?aria-selected="{{this.selected}}"
+					data-ui5-stable="{{this.stableDomRef}}"
 				>
 					{{this.textContent}}
 				</ui5-li>