[英]Using addthis or external javascript to update div in polymer element shadow dom
我正在尝试在聚合物2.0应用程序的元素中添加一些“ addthis”按钮。 我能够导入“ addthis” javascript,但它表明脚本本身需要更新作为子元素一部分的“ div”。 addthis脚本正在寻找class="addthis_inline_share_toolbox"
这可能吗? 我认为问题在于脚本无法在影子dom中找到该类。 我如何才能从Shadow 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>
这里的代码
Web组件的影子域的想法是,没有其他脚本可以更改Web组件网络的Dom。 因此,要使此工作有效,您需要给外部脚本一个Component文档的实例,例如new addThis(Polymer.dom(this.root))
。
这仅是事实的一半,因为如果您使用聚合物1并告诉它使用阴暗dom,则该anwser适用于聚合物2,因为此限制仅适用于阴影dom,因此脚本可能效果很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.