Javascript 如何动态设置Web组件的属性

我一直在尝试为我设计的名为ws-dialog的自定义web组件设置属性。它总是在代码中添加一个未定义的属性：

<ws-dialog class="global" undefined="add-page-content"></ws-dialog>

}

下面是我的自定义组件的代码：

"use strict";


class Dialog extends HTMLElement {


    connectedCallback() {
        //Styles for this custom component are declared in a separate CSS module
    }


    updateContent(id) {
        let content = document.querySelector(`template#${id}`).content;

        if (content)
            this.append(content);
    }


    attributeChangedCallback(name, oldValue, newValue) {
        this.TEMPLATE = "template";

        switch (name) {
            case this.TEMPLATE:
                this.updateContent(newValue);
                break;
        }
    }


    static get observedAttributes() {
        return [this.TEMPLATE];
    }


    static getName() {
        return "ws-dialog";
    }


    get template() {
        return this.getAttribute(this.TEMPLATE);
    }


    set template(template) {
        this.setAttribute(this.TEMPLATE, template);
    }

}



customElements.define(Dialog.getName(), Dialog);

---

这里有一个操场，可以帮助您了解什么时候触发了什么方法

注意调用ObservedAttribute的时间和次数。 这意味着您的this.TEMPLATE未定义，因此成为数组中未定义的字符串

常量日志=…参数=>{ 让div=document.body.appendChilddocument.createElement'div'； div.style=`背景：${args.shift}；颜色：白色；字体：13px Arial`； div.appendargs.join； } 自定义元素。定义“我的元素”，类扩展HtmleElement{ 日志{ logthis.getAttributecolor、this.outerHTML.split>[0]、“>”、…参数； } 静态获取观测属性{ 记录'red'，'my element observedAttributes'；//此处没有'this'/元素！ 返回[颜色]； } 构造函数{super.logconstructor} connectedCallback{ this.logconnectedCallback，this.innerHTML | |无innerHTML；//FireFox差异！ setTimeout=>this.log`delayed connectedCallback${this.innerHTML}`，0； } attributeChangedCallbackname、oldValue、newValue{//4th W3C参数=浏览器中未实现命名空间 this.logattributeChangedCallback，name，oldValue | | null，newValue； } disconnectedCallback{this.logdisconnectedCallback} } document.body.onload==>{ 记录‘洋红’、‘加载事件’； A.setAttributecolor，暗绿色； B.innerHTML=查理取代了布拉沃； B.移除； } 阿尔法

---

Bravoadd console.logobserved、this.TEMPLATE语句到observed属性和所有其他方法，以便您了解它们何时运行，并记录this.TEMPLATE在该阶段的内容。这个diaram也有帮助：我尝试了日志记录方法，发现在设置属性时首先调用ObservedAttribute。如果我把this.TEMPLATE=TEMPLATE；，该属性设置为“模板”。但是一旦调用setter方法，它就会再次变得未定义。这与ObservedAttribute是静态的这一事实有关吗？编辑您的问题并点击Ctrl-M或按钮插入代码段，粘贴新代码，以便我们可以在StackOverflow上执行它，并查看发生了什么。谢谢，我在前面已经让它工作并运行了。主要的问题是，当加载所有内容时，会发生来自HTML文档的调用。调用setter方法后，模板“is”的值再次未定义。我试着用其他代码（而不是web组件）测试它，我发现不能在静态定义中真正定义属性。这个概念与Java非常相似，Java只允许在构造函数和对象实例中声明。不管怎样，我通过使用字符串文本（如模板）来实现它。

"use strict";


class Dialog extends HTMLElement {


    connectedCallback() {
        //Styles for this custom component are declared in a separate CSS module
    }


    updateContent(id) {
        let content = document.querySelector(`template#${id}`).content;

        if (content)
            this.append(content);
    }


    attributeChangedCallback(name, oldValue, newValue) {
        this.TEMPLATE = "template";

        switch (name) {
            case this.TEMPLATE:
                this.updateContent(newValue);
                break;
        }
    }


    static get observedAttributes() {
        return [this.TEMPLATE];
    }


    static getName() {
        return "ws-dialog";
    }


    get template() {
        return this.getAttribute(this.TEMPLATE);
    }


    set template(template) {
        this.setAttribute(this.TEMPLATE, template);
    }

}



customElements.define(Dialog.getName(), Dialog);