2
我制作了一个非常基本的Web组件。我使用自定义元素构造函数编写的JavaScript添加和删除类。添加/删除在阴影DOM中定义的类
为什么当我将文档的样式表中的类移动到自定义元素的影子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>
`