Установить содержимое пользовательского элемента HTML

Question

Я реализовал модал как пользовательский тег 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.Давайте назовем это А. Класс сказал, что пытается создать ModalDialog и должен добавить его в DOM, чтобы он отображался.

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

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

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

Answer 1

Ваш класс 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.