使用 addthis 或外部 javascript 在聚合物元素 shadow dom 中更新 div

Question

我正在尝试向聚合物 2.0 应用程序中的元素添加一些"addthis"按钮。我能够导入"addthis"javascript，但它接缝脚本本身需要更新作为子元素一部分的"div"。addthis 脚本正在寻找class="addthis_inline_share_toolbox"这可能吗？我认为问题是脚本无法在影子 dom 中找到该类。如何使该类从影子 dom 可用，以便脚本可以找到它？有没有办法通过聚合物特性创造这种访问？

<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

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