设置自定义 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!';
        ...
    }

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

现在，我的问题是：如何从 class A 设置 modalHeader 的文本？我试图设置一个属性并在 ModalDialog class 中读取它，但当时该属性未定义。

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

有什么好的方法可以解决吗？

Answer 1

您的 class 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。

设置自定义 HTML 元素的内容

Set content of custom HTML element

javascript

html

ecmascript-6

custom-element