0

Определил Класс 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());
2

1 ответ 1

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.

1
  • Спасибо за ответ! Сейчас попробую 28 дек 2022 в 18:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.