Расширить возможности класса для установки DOM элементу атрибутов

Question

Определил Класс Form. Объявил в нем метод, в котором создаю элемент и добавляю ему нужные css-классы. Не хватает ума сделать так, чтобы Класс при необходимости мог создавать атрибуты у элемента. К примеру, делаю инстанс Класса, передаю ему метод createInput(), создавая тем самым DOM элемент (инпут к примеру). Теперь хочу созданному инпуту добавить атрибут, а через 2 дня добавить id. Возможно ли такую логику прописать в Классе т.е. атрибуты или id или data-set создаются у элемента когда это необходимо. но могут и не создаваться. А потом мы просто наследуемся от Класса в случае необходимости создать новый DOM элемент.

class Form {
    constructor(element, ...classNames) {
      this.element = element
      this.classNames = classNames
    }
    createItem() {
      const element = document.createElement(this.element)
      element.classList.add(...this.classNames)
      return element
    }
    
   }
  
 let item = new Form('input', 'form-style', 'form-style2', 'form-style3')
 document.body.append(item.createItem());

Answer 1

Уточнение

В DOM уже встроено способ для создания пользовательских элементов и способ этот полностью поддерживаться создателями DOM. И что бы вы не создали, не превзойдет уже встроенный создателями вариант. Поэтому я предлагаю такое решение.

Для создания пользовательских элементов в DOM, существуют следующие способы:

1. Новые элементы

Абсолютно новый элемент который не похож ни на одну из встроенных элементов HTML.
Создается класс, который наследуется от HTMLElement и зарегистрируется с помощью customElements.define():

class MyTagElement extends HTMLElement {
  connectedCallback() {
    this.innerText += `Я пользовательский элемент\n`;
    this.innerText += `Мой id - ${this.id}\n`;
    this.innerText += `Мои аттрибуты: - ${[...this.attributes].map(attr => attr.name).join(`, `)}\n`;
    this.innerText += `Мои классы: - ${[...this.classList].join(`, `)}\n`;
  }
}

customElements.define(`my-tag`, MyTagElement);

<my-tag id="my-id" class="my-class" attribute="my-attribute"></my-tag>

Новые элементы поддерживают стандартные свойства и методы обычных элементов в DOM, в том числе id, class, style и другие аттрибуты.

2. Измененные элементы

Элементы, которые модифицируют / улучшают какой-то функционал уже встроенных элементов.
Измененные элементы наследуются от встроенных классов и при регистрации отмечаются с помощью { extends: `` }:

class MyParagraphElement extends HTMLParagraphElement {
    connectedCallback() {
        this.innerText = `Я дополнение к тегу <p>, который изначально дает ему текст.`;
    }
}

customElements.define(`my-p`, MyParagraphElement, { extends: `p` });

<p is="my-p"></p>

Измененные элементы поддерживают стандартные свойства и методы наследуемого элемента и выполняют функционал не меньше, чем наследуемый элемент.

Для "жизнеобеспечения" пользовательских элементов используются специальные методы:

connectedCallback() вызывается каждый раз, когда пользовательский элемент HTML добавляется в DOM.
disconnectedCallback() вызывается каждый раз, когда пользовательский элемент HTML удаляется из DOM.
adoptedCallback() вызывается каждый раз, когда пользовательский элемент HTML перемещается в новый элемент.
attributeChangedCallback() вызывается при каждом изменении (добавлении, изменении значения или удаления) атрибута пользовательского элемента HTML.

А название пользовательских элементов принято писать через тире, чтобы не конфликтовали со встроенными, в новых версиях HTML.

БЛОГ НА HUSL

Расширить возможности класса для установки DOM элементу атрибутов

Ответы (1 шт):

Уточнение

1. Новые элементы

2. Измененные элементы