我将模态实现为自定义 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 以便显示。
现在,我的问题是:如何设置 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);
另一件需要注意的事情是你不需要保存 this.attachShadow
的结果:
this.shadow = this.attachShadow({mode: 'open'});
因为它已经作为 this.shadowRoot
可用。
关于javascript - 设置自定义 HTML 元素的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55492356/