Exposer l'élément web-composant de ShadowDom à un JS externe en utilisant document.getElementById

Question

Je travaille avec le modèle actuel du kit de démarrage PWA de Polymer.

https://github.com/Polymer/pwa-starter-kit/tree/template-typescript

Ma page Web-component element renvoie le code suivant avec un élément DIV :

return html`
      ${SharedStyles}    
      <section>
        ...my content...

      </section>
      <div id="CONTAINER NAME"></div>
    `

Je dois accéder à l'élément CONTAINER NAME à partir d'un javascript externe via document.getElementById. Je sais qu'il se trouve dans le shadow dom mais je ne peux pas modifier le JS externe. La question est donc de savoir comment le rendre accessible depuis le JS via document.getElementById ?

Le JavaScript externe charge un iframe dans le fichier nommé div . Ce composant externe a besoin d'obtenir l'élément div par document.getElementById pour charger l'iframe dans le div spécifié.

J'ai cherché et je n'ai pas trouvé de moyen de forcer l'élément div du shadow dom de ma page web-component à être exposé/placé dans le DOM.

Je viens de trouver la solution mentionnée ici mais je n'ai pas réussi à la faire fonctionner dans le modèle PWA. Peut-être parce que les shadow doms sont en cascade dans le modèle PWA ?

https://stackoverflow.com/a/47082470/9192527

Existe-t-il un moyen de mettre à jour le composant web basé sur le kit Polymer v3/PWA avec le javascript externe (tiers) tout en utilisant document.getElementbyId pour modifier mon div à l'intérieur du composant web ?

Alors, je cherche une possibilité d'utiliser peut-être slots pour exposer un élément du domaine de l'ombre au domaine de la lumière ? Je n'arrive pas à le faire fonctionner avec les solutions proposées ci-dessus.

Answer 1

Comme vous l'avez mentionné, lit-element utilise le shadow dom par défaut, ce qui présente de nombreux avantages pour la création de composants réutilisables.

Cependant, vous pouvez choisir de ne pas le faire et d'utiliser le dom "light" qui rendra le contenu du composant dans le dom principal, ce qui rendra ce contenu accessible à l'aide d'éléments tels que document.getElementById() o document.querySelector()

Voici un exemple minimal de la façon d'utiliser le light dom dans un composant basé sur un élément de lumière (et voici un problème où vous pouvez le voir en action)

class MyElement extends LitElement {  
  render() {
    return html`
      <section>
        ... My content ...
      </section>
      <div id="myElementContainer">
        This is a container inside my element
      </div>
    `;
  }

  createRenderRoot() {
    // this is what overrides lit-element's behavior so that the contents don't render in shadow dom
    return this;
  }

}

Gardez à l'esprit que, dans ce cas, vous ne devez utiliser ce composant qu'une seule fois dans votre application, en raison de la manière dont les getElementById() fonctionne et que vous ne serez pas en mesure d'utiliser <slot> dans votre composant, car il s'agit d'une fonctionnalité uniquement disponible pour le shadow dom

Answer 2

Je cherche donc une possibilité d'utiliser des fentes pour exposer un élément du domaine de l'ombre au domaine de la lumière. Mais je n'arrive pas à le faire fonctionner avec les solutions proposées ci-dessus.

En fait, ce que vous devriez faire, c'est l'inverse : exposez les <div> à sélectionner dans le DOM de la lumière et l'intégrer dans le DOM de l'ombre via un <slot> si vous en avez besoin.

this.innerHTML = '<div id="CONTAINER NAME"></div>'
return html`
      ${SharedStyles}    
      <section>
        ...my content...

      </section>
      <slot></slot>
    `