我已经做了一个非常基本的Web组件。我使用自定义元素构造函数中编写的JavaScript添加和删除类。

为什么当我将类从文档的样式表移动到自定义元素的影子DOM内的样式表时,我的JavaScript不再能够添加或删除它们?

class BgAnim extends HTMLElement {
        constructor() {
            super()

            this.attachShadow({
                mode: 'open'
            })
            this.shadowRoot.innerHTML =
                `
<style>

:host {
background-image: linear-gradient(#0fe0e0 0%, #0fe0e0 50%, transparent 50%, transparent 100%);
background-size: 100% 200%;
background-repeat: no-repeat;
background-position: 0 100%;
padding: 4px;
}
</style>

<span><slot></slot></span>
`

            this.addEventListener('mouseenter', function () {
                this.classList.add('transition')
                this.classList.add('bg-position0')
            })
            this.addEventListener('mouseleave', function () {
                this.classList.add('bg-position-negative')
                var that = this
                setTimeout(function () {
                    that.classList.remove('transition')
                    that.classList.remove('bg-position0')
                    that.classList.remove('bg-position-negative')
                }, 510)
            })
        }
    }

    customElements.define('bg-anim', BgAnim)

我要用JavaScript添加和删除的样式是
    .transition {
        transition: background-position .5s ease-in;
    }

    .bg-position0 {
        background-position: 0 0%;
    }

    .bg-position-negative {
        background-position: 0 -100%;
    }

当它们在影子DOM中时,我的JS无法使用:
this.shadowRoot.innerHTML =
                `
<style>
    .transition {
    transition: background-position .5s ease-in;
}

.bg-position0 {
    background-position: 0 0%;
}

.bg-position-negative {
    background-position: 0 -100%;
}

:host {
background-image: linear-gradient(#0fe0e0 0%, #0fe0e0 50%, transparent 50%, transparent 100%);
background-size: 100% 200%;
background-repeat: no-repeat;
background-position: 0 100%;
padding: 4px;
}
</style>
<span><slot></slot></span>
`

最佳答案

要使样式在Shadow DOM中工作,应使用:host([selector]):

:host(.transition) {
    transition: background-position .5s ease-in;
}

:host(.bg-position0) {
    background-position: 0 0%;
}

:host(.bg-position-negative) {
    background-position: 0 -100%;
}

10-05 20:57
查看更多