Использование addthis или внешнего javascript для обновления div в полимерном элементе shadow dom

Question

Я пытаюсь добавить несколько кнопок "addthis" к элементу в приложении polymer 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

Идея теневого домена из веб-компонентов заключается в том, что никакой другой сценарий не может изменить Dom веб-Compontnet. Поэтому, чтобы это работало, вам нужно дать внешнему скрипту экземпляр документа Компонента, например new addThis(Polymer.dom(this.root)),
Это только половина правды, потому что этот ответ относится к полимеру 2, если вы используете полимер 1 и говорите ему использовать тенистый домен, ваш сценарий может просто отлично работать, потому что это ограничение относится только к теневому домену.