Блог

Я реализовал модальный как пользовательский HTML-тег.

 class ModalDialog extends HTMLElement {
    constructor() {
        super();

        this.shadow = this.attachShadow({
            mode: 'open'
        });

        this.modal = document.createElement('div');
        this.modal.className = 'modal';

        this.modalWrapper = document.createElement('div');
        this.modalWrapper.className = 'modal-wrapper';

        this.modalHeader = document.createElement('div');
        this.modalHeader.className = 'modal-header';
        this.modalHeader.innerHTML = 'Oops, nothing found!';
        ...
    }
  

Кроме того, я реализовал другой класс, который наследуется от HTMLElement. Давайте назовем это A. Указанный класс пытается создать ModalDialog и должен добавить его в DOM, чтобы он отображался.

Теперь мой вопрос: как я могу установить текст modalHeader из класса A? Я попытался установить атрибут и прочитать его в классе ModalDialog, но в то время атрибут не определен.

 class A extends HTMLElement {
    ...
    this.modal.setAttribute('headerText', 'Blablabla');
    ...
}
  

Есть ли хороший способ решить эту проблему?

Ваш класс A должен иметь возможность просто получать доступ к внутренним элементам и устанавливать их innerHTML или textContent следующим образом:

 class A extends HTMLElement {
  ...
  this.modal.innerHTML = 'Blablabla';
  ...
}
  

Кроме того, убедитесь, что вы размещаете this.modal в shadowRoot :

 this.shadowRoot.appendChild(this.modal);
  

Еще одна вещь, о которой следует знать, это то, что вам не нужно сохранять результаты this.attachShadow :

  this.shadow = this.attachShadow({mode: 'open'});
  

Поскольку это уже доступно как this.shadowRoot .