feat: add tag name as attribute when custom registered

src/auro-lockup.js

@@ -9,6 +9,7 @@
 import { LitElement, html } from "lit";
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
+
 import logoOfficial from '@alaskaairux/icons/dist/restricted/AS-tagline-200.mjs';
 import logoStandard from '@alaskaairux/icons/dist/restricted/AS-200.mjs';
 import logoOneworld from '@alaskaairux/icons/dist/logos/oneworld.mjs';
@@ -17,6 +18,8 @@ import styleCss from "./style-css.js";
 import colorCss from "./color-css.js";
 import tokensCss from "./tokens-css.js";
 
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * The auro-lockup element is a standardized custom element for the use in headers of Alaska Airlines extended experiences.
@@ -37,6 +40,11 @@ export class AuroLockup extends LitElement {
     this.path = '/';
     this.standard = false;
     this.oneworld = false;
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
   // function to define props used within the scope of this component
@@ -63,6 +71,11 @@ export class AuroLockup extends LitElement {
     ];
   }
 
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-lockup');
+  }
+
   /**
    * @private
    * @param {string} svgContent - The imported svg icon.