Repository: exadel-inc/esl
Pull request #1805 (2023-07-17 12:50:56)

fix(esl-base-element): fix redefine tag feature (existing component receives incorrect tag name)
Closes: #1804

Introduced in #1766


Patch:
diff --git a/src/modules/esl-base-element/core/esl-base-element.ts b/src/modules/esl-base-element/core/esl-base-element.ts
index ca683ff49..c597b13a2 100644
--- a/src/modules/esl-base-element/core/esl-base-element.ts
+++ b/src/modules/esl-base-element/core/esl-base-element.ts
@@ -125,8 +125,8 @@ export abstract class ESLBaseElement extends HTMLElement implements ESLBaseCompo
       throw new DOMException('[ESL]: Element tag already occupied or inconsistent', 'NotSupportedError');
     }
     if (constructor) return;
-    customElements.define(tagName, this as any as CustomElementConstructor);
     finalize(this, tagName);
+    customElements.define(tagName, this as any as CustomElementConstructor);
   }
 
   /** Shortcut for `customElements.whenDefined(currentCustomElement)` */


Test patch:
diff --git a/src/modules/esl-base-element/test/element.test.ts b/src/modules/esl-base-element/test/element.test.ts
index 01b7621cc..3361bb2d0 100644
--- a/src/modules/esl-base-element/test/element.test.ts
+++ b/src/modules/esl-base-element/test/element.test.ts
@@ -2,11 +2,12 @@ import '../../../polyfills/es5-target-shim';
 import {ESLBaseElement} from '../core';
 
 describe('ESLBaseElement', () => {
-
   class TestElement extends ESLBaseElement {
     public static eventNs = 'esl:test';
   }
-  class TestElement2 extends ESLBaseElement {}
+
+  class TestElement2 extends ESLBaseElement {
+  }
 
   TestElement.register('test-el-basic');
   const el = new TestElement();
@@ -35,7 +36,10 @@ describe('ESLBaseElement', () => {
     await customElements.whenDefined('test-test');
     expect(() => TestElement2.register('test-test')).not.toThrowError();
     expect(() => TestElement2.register('test-test-2')).toThrowError();
-    try {TestElement2.is = 'test-test-2';} catch { /* empty */ }
+    try {
+      TestElement2.is = 'test-test-2';
+    } catch { /* empty */
+    }
     expect(TestElement2.is).toBe('test-test');
   });
 
@@ -44,14 +48,33 @@ describe('ESLBaseElement', () => {
       class TestIBase extends TestElement {
         static override is = 'test-base-inh';
       }
+
       TestIBase.register();
+
       class TestInherited extends TestElement {
         static override is = 'test-child-inh';
       }
+
       TestInherited.register();
     }).not.toThrowError();
   });
 
+  describe('ESLBaseElement has correct tag name on connected callback', () => {
+    const customName = 'test-base-inh-livecycle-1';
+
+    class TestEl extends TestElement {
+      static override is = 'test-base-inh-livecycle';
+      protected override connectedCallback(): void {
+        super.connectedCallback();
+        expect(this.baseTagName).toBe(customName);
+      }
+    }
+
+    beforeAll(() => document.body.append(document.createElement(customName)));
+    afterAll(() => [...document.body.querySelectorAll(customName)].forEach((node) => node.parentElement?.removeChild(node)));
+    test('Register an element with custom tag name', () => expect(() => TestEl.register(customName)).not.toThrowError());
+  });
+
   describe('ESLBaseElement prototype', () => {
     test('ESLBaseElement $attr', () => {
       const attrName = 'test-attr';