feat(esl-base-element): ESLBaseElement.prototype.baseTagName shortcut

src/modules/esl-alert/core/esl-alert.ts

@@ -62,8 +62,7 @@ export class ESLAlert extends ESLToggleable {
   public static init(options?: Partial<ESLAlert>): ESLAlert {
     let alert: ESLAlert = document.querySelector(`body > ${ESLAlert.is}`)!;
     if (!alert) {
-      alert = document.createElement(ESLAlert.is) as ESLAlert;
-      options && Object.assign(alert, options);
+      alert = Object.assign(ESLAlert.create(), options || {});
       document.body.appendChild(alert);
     }
     return alert;

src/modules/esl-base-element/core/esl-base-element.ts

@@ -24,9 +24,14 @@ export abstract class ESLBaseElement extends HTMLElement {
 
   protected _connected: boolean = false;
 
+  /** @returns custom element tag name */
+  public get baseTagName(): string {
+    return (this.constructor as typeof ESLBaseElement).is;
+  }
+
   protected connectedCallback(): void {
     this._connected = true;
-    this.classList.add((this.constructor as typeof ESLBaseElement).is);
+    this.classList.add(this.baseTagName);
 
     ESLEventUtils.subscribe(this);
   }

src/modules/esl-base-element/test/element.listener.test.ts

@@ -15,7 +15,7 @@ describe('ESLBaseElement: listeners', () => {
     }
     TestElement.register();
 
-    const el = document.createElement(TestElement.is);
+    const el = TestElement.create();
 
     beforeAll(() => document.body.appendChild(el));
 

src/modules/esl-footnotes/core/esl-note.ts

@@ -127,8 +127,7 @@ export class ESLNote extends ESLBaseElement {
 
   /** Gets attribute value from the closest element with group behavior settings */
   protected getClosestRelatedAttr(attrName: string): string | null {
-    const tagName = (this.constructor as typeof ESLBaseElement).is;
-    const relatedAttrName = `${tagName}-${attrName}`;
+    const relatedAttrName = `${this.baseTagName}-${attrName}`;
     const $closest = this.closest(`[${relatedAttrName}]`);
     return $closest ? $closest.getAttribute(relatedAttrName) : null;
   }

src/modules/esl-forms/esl-select-list/core/esl-select-item.ts

@@ -51,7 +51,7 @@ export class ESLSelectItem extends ESLBaseElement {
 
   /** Helper to create an option item */
   public static build(option: ESLSelectOption): ESLSelectItem {
-    const item = document.createElement(ESLSelectItem.is) as ESLSelectItem;
+    const item = ESLSelectItem.create();
     item.update(option);
     return item;
   }

src/modules/esl-forms/esl-select-list/core/esl-select-list.ts

@@ -40,9 +40,9 @@ export class ESLSelectList extends ESLSelectWrapper {
     this.$list.setAttribute('role', 'list');
     this.$list.classList.add('esl-scrollable-content');
     this.$list.classList.add('esl-select-list-container');
-    this.$scroll = document.createElement(ESLScrollbar.is) as ESLScrollbar;
+    this.$scroll = ESLScrollbar.create();
     this.$scroll.target = '::prev';
-    this.$selectAll = document.createElement(ESLSelectItem.is) as ESLSelectItem;
+    this.$selectAll = ESLSelectItem.create();
     this.$selectAll.classList.add('esl-select-all-item');
   }
 

src/modules/esl-mixin-element/ui/esl-mixin-element.ts

@@ -36,12 +36,12 @@ export class ESLMixinElement implements ESLDomElementRelated {
 
   /** Callback of mixin instance initialization */
   public connectedCallback(): void {
-    const constructor = this.constructor as typeof ESLMixinElement;
-    if (constructor.observedAttributes.length) {
+    const {observedAttributes} = this.constructor as typeof ESLMixinElement;
+    if (observedAttributes.length) {
       this._attr$$ = new MutationObserver(this._onAttrMutation.bind(this));
       this._attr$$.observe(this.$host, {
         attributes: true,
-        attributeFilter: constructor.observedAttributes,
+        attributeFilter: observedAttributes,
         attributeOldValue: true
       });
     }

src/modules/esl-toggleable/core/esl-toggleable.ts

@@ -121,8 +121,7 @@ export class ESLToggleable extends ESLBaseElement {
   protected override connectedCallback(): void {
     super.connectedCallback();
     if (!this.id && !this.noAutoId) {
-      const tag = (this.constructor as typeof ESLToggleable).is;
-      this.id = sequentialUID(tag, tag + '-');
+      this.id = sequentialUID(this.baseTagName, this.baseTagName + '-');
     }
     this.initiallyOpened = this.hasAttribute('open');
     this.setInitialState();

src/modules/esl-toggleable/test/toggleable.request.test.ts

@@ -6,7 +6,7 @@ describe('ESLToggleable: show/hide-request events', () => {
   beforeAll(() => ESLToggleable.register());
 
   describe('Direct events correctly caught by toggleable', () => {
-    const $el = document.createElement(ESLToggleable.is) as ESLToggleable;
+    const $el = ESLToggleable.create();
     jest.useFakeTimers();
     beforeAll(() => document.body.appendChild($el));
     afterAll(() => ($el.parentElement === document.body) && document.body.removeChild($el));
@@ -29,8 +29,8 @@ describe('ESLToggleable: show/hide-request events', () => {
   });
 
   describe('ESLToggleables catch and filtering bubbling events', () => {
-    const $root = document.createElement(ESLToggleable.is) as ESLToggleable;
-    const $childTbl = document.createElement(ESLToggleable.is) as ESLToggleable;
+    const $root = ESLToggleable.create();
+    const $childTbl = ESLToggleable.create();
     const $button = document.createElement('button');
     $root.classList.add('root');
     $root.appendChild($childTbl);