그림자에 정의 된 클래스 추가/제거 DOM

Question

아주 기본적인 웹 구성 요소를 만들었습니다. 사용자 정의 요소 생성자 내에서 작성된 JavaScript를 사용하여 클래스를 추가 및 제거합니다.

문서의 스타일 시트에서 사용자 정의 요소의 그림자 DOM 안에있는 스타일 시트로 클래스를 이동하면 내 JavaScript가 더 이상 추가하거나 제거 할 수 없습니다. 그들은 그림자 DOM에있을 때 내가 추가하고 내 자바 스크립트가 함께 제거 할

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) 

작풍

.transition { 
     transition: background-position .5s ease-in; 
    } 

    .bg-position0 { 
     background-position: 0 0%; 
    } 

    .bg-position-negative { 
     background-position: 0 -100%; 
    } 

내 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%; 
} 

을 사용해야합니다.