Adding/removing 类在阴影中定义 DOM

Question

我制作了一个非常基本的网络组件。我正在添加和删除类，并在自定义元素构造函数中写入 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

要使您的样式在阴影中发挥作用 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%;
}

Adding/removing 类在阴影中定义 DOM

Adding/removing classes defined in shadow DOM

javascript

css

web-component

shadow-dom

custom-element

Adding/removing 类 在阴影中定义 DOM

Adding/removing classes defined in shadow DOM

javascript

css

web-component

shadow-dom

custom-element

Adding/removing 类在阴影中定义 DOM