添加/删除 shadow DOM 中定义的类答案

【问题标题】：Adding/removing classes defined in shadow DOM添加/删除 shadow DOM 中定义的类
【发布时间】：2018-02-23 11:15:57
【问题描述】：

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

【问题讨论】：

标签： javascript css web-component shadow-dom custom-element

【解决方案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%;
}

【讨论】：