Question

我正在尝试为不同的微调项动态添加和删除类。我正在方法中设置旋转器组件的类：

 _handleDelete(event) {
    this.shadowRoot.querySelectorAll('spinner-component')[event.model.index].classList.add('spinner');
    //....lines of code...
}

这是模板：

static get template() {
    return `
        <style>
            spinner-component {
                display: none;
            }
            .spinner {
                display: initial;
                z-index: 9;
            }

        </style>
        <spinner-component></spinner-component>
        <spinner-component></spinner-component>
        <spinner-component></spinner-component>
        ${super.template}
    `;
}

然后在调试中，这是我在classList.add行之后得到的内容：

$0.shadowRoot.querySelectorAll('iris-spinner')[0].classList
    DOMTokenList ["spinner", value: " spinner"]
        0: "spinner"
        length: 1
        value: " 
        spinner"__proto__: DOMTokenList

问题是.spinner类未应用于我的spinner-component元素。而且，它在DOM中仍显示为：

<spinner-component></spinner-component>而不是<spinner-component class='spinner'></spinner-component>

我通过使用this.shadowRoot.querySelectorAll('spinner-component')[event.model.index].className += ' spinner';找到了一种解决方法，但我想知道为什么会这样。

谢谢！

聚合物classList.add（）不会更新DOM

0 个答案: