我已经做了一个非常基本的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%;
}