feat: add component name as attribute during custom registration

src/auro-menu.js

@@ -9,6 +9,8 @@ import styleCss from "./style-menu-css.js";
 import colorCss from "./color-menu-css.js";
 import tokensCss from "./tokens-css.js";
 
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
 import './auro-menuoption.js';
 import "mark.js/dist/mark.es6.min.js";
 
@@ -50,6 +52,11 @@ export class AuroMenu extends LitElement {
      * @private
      */
     this.rootMenu = true;
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
   static get properties() {
@@ -100,6 +107,9 @@ export class AuroMenu extends LitElement {
   }
 
   firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
+
     this.addEventListener('keydown', this.handleKeyDown);
   }
 

src/auro-menuoption.js

@@ -10,8 +10,9 @@ import styleCss from "./style-menuoption-css.js";
 import colorCss from "./color-menuoption-css.js";
 import tokensCss from "./tokens-css.js";
 
-
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
+
 import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
 import iconVersion from './iconVersion';
 
@@ -32,7 +33,6 @@ class AuroMenuOption extends LitElement {
     /**
      * Generate unique names for dependency components.
      */
-
     const versioning = new AuroDependencyVersioning();
     this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
 
@@ -44,6 +44,11 @@ class AuroMenuOption extends LitElement {
      * @private
      */
     this.tabIndex = -1;
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
   static get properties() {
@@ -80,6 +85,9 @@ class AuroMenuOption extends LitElement {
   }
 
   firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
+
     this.setAttribute('role', 'option');
 
     this.addEventListener('mouseover', () => {