2017-07-26 7 views
0

ポリマー2.0アプリの要素に「addthis」ボタンを追加しようとしています。私は "addthis" javascriptをインポートすることができますが、スクリプト自体が子要素の一部である "div"を更新する必要があります。このスクリプトはclass="addthis_inline_share_toolbox"を探していますこれは可能ですか?私は問題は、スクリプトがシャドウドームのクラスを見つけることができないと思う。どのようにスクリプトを見つけることができるように、そのクラスをシャドードームから利用できるようにすることができますか?ポリマーのプロパティを介してこのアクセスを作成する方法はありますか? WebコンポーネントからシャドウDOMのここポリマー要素シャドーDOM内のdivを更新するための追加または外部javascriptの使用

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

コード

+0

問題のアプリは次のとおりです:https://poems-c680f.firebaseapp.com/ – dnvn

答えて

0

アイデアは、他のスクリプトは、Web Compontnetのドムを変更することはできませんということです。このようにするには、外部スクリプトにコンポーネントのドキュメントのインスタンスをnew addThis(Polymer.dom(this.root))のように与える必要があります。
ポリマー1を使用して、この制限がシャドードームだけであるため、スクリプトがうまくいくかもしれない陰影ドームを使用するように指示した場合、このアンカーはポリマー2のためのものです。

関連する問題