perf: add component attribute when custom named

src/auro-badge.js

@@ -144,6 +144,27 @@ export class AuroBadge extends LitElement {
     return iconHtml;
   }
 
+  /**
+   * If component is registered as a custom name,
+   * this function will add an attribute to the element
+   * with the default name. This is so that other parent
+   * components can still this the element.
+   * @private
+   * @param {string} name - The default tag name.
+   * @param {HTMLElement} elem - The element to add the attribute to.
+   * @returns {void}
+   */
+  handleCustomTagName(name, elem) {
+    if (name.toLowerCase() !== elem.tagName.toLowerCase()) {
+      elem.setAttribute(name, true);
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleCustomTagName('auro-badge', this);
+  }
+
   firstUpdated() {
     // Finds slotted content and adds string to button value
     if (this.target) {