设置自定义HTML元素的内容

时间:2019-04-03 10:00:25

标签: javascript html ecmascript-6 custom-element

我实现了一个模式作为自定义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。Said类正在尝试创建ModalDialog并将其添加到DOM中,以便显示出来。

现在,我的问题是:如何设置A类的modalHeader的文本? 我试图设置一个属性并在ModalDialog类中读取它,但是那时该属性是不确定的。

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

有什么好办法解决这个问题吗?

1 个答案:

答案 0 :(得分:1)

您的A类应该应该能够访问内部元素并像这样设置它们的innerHTMLtextContent

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的形式提供。