我想在Polymer 3上制作的Web应用程序中添加"消息给我们"按钮。 在Facebook网站上，我发现了必须在html正文中添加Facebook SDK脚本的信息：
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.0'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
然后将div 添加到我要添加按钮的页面：
<div class="fb-messengermessageus"
messenger_app_id="<APP_ID>"
page_id="<PAGE_ID>"
color="<blue | white>"
size="<standard | large | xlarge>">
</div>
但是在 Polymer 中，当我将此代码添加到页面时，没有任何反应。 我应该创建一个特殊的聚合物元素还是做错了什么？ 任何建议都会有所帮助 谢谢
这与聚合物无关。您当前有一个无效的 HTML 块。正如您在div中看到的，它们有几个属性，您需要输入或选择一个值。例如，如果您的app id是123456，而您的page id是abcd，那么您希望它是蓝色和大：
<div class="fb-messengermessageus"
messenger_app_id="123456"
page_id="abcd"
color="blue>"
size="large">
</div>
我可以看到类fb-messengermessageus.他们是否也提供任何样式CSS？
经过几天的学习，我找到了解决方案。正如Binh Bui所说，问题出在Shadow DOM上。它与DOM隔离，Facebook SDK在Web组件中不起作用。要绕过这一点并将 facebook 按钮添加到您的 Web 组件，我们需要使用"插槽"，更多详细信息在这里。但是在我的示例中，我有两个级别的影子 dom，所以我需要从索引.html (DOM( 文件、抛出的 my-app.js 文件、直到 my-view.js 文件制作多级插槽： 我放入 index.html 中的 SDK 脚本，并在我插入的正文 -> my-app 部分中：
<body>
<my-app>
<div slot="child">
<div
class="fb-messengermessageus"
messenger_app_id="520865131680985"
page_id="276570696236683"
color="blue"
size="large">
</div>
</div>
</my-app>
...
在 my-app.js 文件中，我添加了插槽：
<my-view name="contacts">
<slot name="child"></slot>
</my-view>
在我的视图中.js我添加了未命名的插槽：
<div>
<slot></slot>
</div>
结果，该按钮呈现在我的聚合物页面上:) 这个例子和这个对我帮助很大。