Ajout/suppression de classes définies dans l'ombre DOM

Question

J'ai créé un composant Web basique. J'ajoute et supprime des classes avec JavaScript écrites dans le constructeur d'élément personnalisé.

Pourquoi est-ce que lorsque je déplace les classes de la feuille de style du document vers la feuille de style à l'intérieur du DOM de l'élément personnalisé, mon javascript ne peut plus les ajouter ou les supprimer?

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) 

Les styles que je veux ajouter et supprimer mes javascript sont

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

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

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

Quand ils sont dans l'ombre DOM mon JS ne fonctionne pas:

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

Pour faites fonctionner vos styles dans un DOM Shadow, vous devez utiliser :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%; 
}