Javascript 不带iframe的嵌入式小部件中的自定义样式

我正在创建一个小部件，它只需包含一小段html和javascript，就可以嵌入到用户的页面中

这个想法类似于Facebook和Twitter使用like和tweet按钮所做的。唯一的区别是我不能像他们那样用iframe实现小部件。我需要将小部件注入到常规DOM元素中，该元素将被标记为特殊的数据和类属性

例如，解决方案可能如下所示。这将提供给用户，以便在其html中插入：

<div class="widget-action" data-url="http://example.com"></div>
<script>
(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 = "http://cdn/where/widgets/script/is/hosted";
   fjs.parentNode.insertBefore(js, fjs);
})(document, 'script', 'namespace-widget-sdk');
</script>

托管在CDN上的小部件脚本将完成创建必要元素并将它们注入小部件操作元素的工作

这很简单。我想弄明白的是，处理风格的最佳方式是什么

最有效的方法是什么

要以与托管.css文件的CDN链接相同的方式动态创建元素并提供href属性？ 或者使用动态创建的标记注入样式？ 其他选择？

---

谢谢

如果知道小部件的输出，可以使用普通css文件对其进行样式设置

您可以只针对元素，并根据需要设置其样式。如果小部件没有向输出中添加class&id，那么将小部件放入div中，然后对其进行样式化

如果需要进一步的帮助，可以举一个输出的例子