使用addthis或外部javascript来更新div在聚合物元素阴影dom

Question

我想添加一些“addthis”按钮到​​聚合物2.0应用程序中的元素。我可以导入“addthis”javascript，但它接收脚本本身需要更新作为子元素一部分的“div”。 addthis脚本正在寻找class="addthis_inline_share_toolbox"这可能吗？我认为问题在于脚本无法在阴影中找到该类。我怎样才能让这个类从影子中获得，以便脚本能够找到它？有没有办法通过聚合物物业创造这种通道？

<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> 

这里

Answer 1

代码Web组件影子DOM的想法是，没有其他的脚本可以更改Web Compontnet的大教堂。所以要做到这一点，您需要为外部脚本提供组件文档的一个实例，如new addThis(Polymer.dom(this.root))。
这只是一半的事实，因为这个anwser是聚合物2，如果你使用聚合物1，并告诉它使用阴暗的dom你的脚本可能会正常工作，因为这个限制只适用于阴影dom。