Javascript 设置自定义HTML元素的内容

我实现了一个作为自定义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!';
        ...
    }

此外，我还实现了另一个继承自HtmleElement的类。我们称之为A。Said类正在尝试创建ModalDialog，并应将其添加到DOM中，以便显示它

现在，我的问题是：如何从类A设置modalHeader的文本？ 我试图设置一个属性并在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);

另一件需要注意的事情是，您不需要保存此

的结果。attachShadow

：

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

因为它已经作为

this.shadowRoot

提供