javascript - 添加/删除影子 DOM 中定义的类

Question

我制作了一个非常基本的 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>
`

Answer 1

要使您的样式在 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%;
}