Utiliser addthis ou javascript externe pour mettre à jour div dans l'ombre de l'élément polymère dom

Question

J'essaie d'ajouter des boutons "addthis" à un élément dans une application polymère 2.0. Je suis en mesure d'importer le "javascript" "addthis" mais il semble que le script lui-même a besoin de mettre à jour un "div" qui fait partie d'un élément enfant. Le script addthis recherche class="addthis_inline_share_toolbox" Est-ce possible? Je pense que le problème est que le script ne peut pas trouver la classe dans l'ombre. Comment puis-je rendre cette classe disponible depuis l'ombre pour que le script puisse la trouver? Y at-il un moyen de créer cet accès à travers une propriété de polymère?

<dom-module id="poem-card"> 
<template> 
    <style> 
    :host { 
     display: block; 
    } 

    img { 
     width: 100% 
    } 

    paper-card { 
     --paper-card-header-text: { 
     font-family: 'Fascinate Inline', cursive; 
     color: yellow; 
     font-size: xx-large; 
     }; 
     --paper-card-header{ 
     position: 50%; 
     }; 
    } 
    .card-content *{ 
     margin: 8px 0; 
     font-weight: bold; 
     font-family: 'Alegreya Sans SC', sans-serif; 

    } 

    </style> 
    <iron-ajax 
    auto 
    url="https://api.json" 
    handle-as="json" 
    last-response="{{response}}"> 
    </iron-ajax> 
    <paper-card heading="{{response.items.0.title}}" image="https://placeimg.com/600/400/nature/sepia" alt="{{response.items.0.title}}"> 
     <div class="card-content"> 
     <p inner-h-t-m-l="{{response.items.0.content}}"></p> 
     </div> 
     <div class="card-actions"> 

     <div class="addthis_inline_share_toolbox"></div> 
     </div> 
    </paper-card> 



</template> 

<script> 
    /** 
    * `poem-card` 
    * an individual poem in card form 
    * 
    * @customElement 
    * @polymer 
    * @demo demo/index.html 
    */ 
    class PoemCard extends Polymer.Element { 
    static get is() { return 'poem-card'; } 
    static get properties() { 
     return { 
     prop1: { 
      type: String, 
      value: 'poem-card' 
     } 
     }; 
    } 
    } 

    window.customElements.define(PoemCard.is, PoemCard); 
</script> 

<script type="text/javascript" src="/addthis.js"></script> 

Code

ici

Answer 1

L'idée du Royaume d'ombre de composants Web est qu'aucun autre script peut changer le Dom d'un Web Compontnet. Donc, pour que cela fonctionne, vous devez donner au script externe une instance du document du composant comme new addThis(Polymer.dom(this.root)).
Ceci est seulement la moitié de la vérité parce que cette réponse est pour le polymère 2 si vous utilisez le polymère 1 et dites-lui d'utiliser om votre script pourrait bien fonctionner parce que cette restriction est seulement pour l'ombre.