Javascript 聚合物自定义元素中的外部样式表

我将第三方控件包装在polymer 1.1自定义元素中。该控件附带了一个CSS文件，我想将其范围扩展到我的自定义元素。推荐的方法是什么？我想到的一些可能的选择是：

在我的自定义元素中包含一个指向我的css文件的普通旧链接标记

使用HTML导入

在Polymer 1.1中，有一个称为样式模块的新概念，根据Polymer文档，它应该取代外部sylesheets： 是在样式模块中指定外部样式表的另一种方法吗

我不知道上述方法是否适用于我的场景

更新

我尝试使用下面一个答案中建议的样式模块，但由于某种原因，样式模块中指定的第三方css文件没有加载。知道为什么吗

my-style-module.html：

<dom-module id="my-style-module">
    <template>
        <link rel="import" href="http://url_of_third_party_css_file">
    </template>
</dom-module>

my-custom-element.html（示例）：

：host{display:block；}
你好

这里是1.0不推荐的方式，我在这里做了一个简单的例子：基本上，您使用您提到的外部CSS文件并使用自定义导入

---

但是现在，从1.1开始，有了一种新的方法，你把CSS放到一个组件中，通过HTML导入，然后在组件中添加一个style include标记来包含它：看起来你应该使用这种方法，尽管根据他们的博文，不推荐的CSS仍然可以工作。

就在昨天，我还在处理这个问题。因为这个版本使用了shadydom，所以全局样式表（老式的链接标记方式）似乎可以正常工作。如果您采用新的方式，您可能会得到一个不起作用的样式表，因为所有选择器都会自动命名，以防止泄漏到其他dom模块中。在dom检查器中，滚动到顶部并查看样式元素。在这里你可以看到polymer是如何重写所有样式表定义的……第二和第三个链接被破坏了。你能补充一下当时真实情况的相关部分吗。考虑链接到这些URL的归档.ORG版本。

<!-- import the module  -->
<link rel="import" href="my-style-module.html">

<dom-module id="my-custom-element">
  <template>
    <!-- include the style module by name -->
    <style include="my-style-module"></style>
    <style>:host { display: block; }</style>
    <span>Hello</span>
  </template>      
</dom-module>