javascript - Polymer 自定义元素中的外部样式表

Question

我将第三方控件包装在 Polymer 1.1 自定义元素中。该控件带有一个 CSS 文件，我想将该文件限定为我的自定义元素。这样做的推荐方法是什么？我想到的一些可能的选择是:

1. 在我的自定义元素中包含指向我的 css 文件的普通旧链接标记
2. 使用 HTML 导入。
3. 在 Polymer 1.1 中，有一个称为样式模块的新概念，根据 polymer 文档，它应该取代外部样式表: https://www.polymer-project.org/1.0/docs/devguide/styling.html 在样式模块中指定外部样式表的另一种方法是什么？

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

更新

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

我的样式模块.html:

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

我的自定义元素.html(样本):

<!-- 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>

Answer 1

这里是 1.0 弃用的方式 https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets我在这里做了一个简短的例子:http://polymerjs.newfivefour.com/post/126638694607/sharing-css-styles-across-elements基本上，您使用您提到的外部 CSS 文件并使用自定义导入。

但是现在，从 1.1 开始，有一种新方法，您可以将 CSS 放入组件中，并通过 HTML 导入将其包含，然后在组件中添加样式包含标签:https://blog.polymer-project.org/announcements/2015/08/13/1.1-release/看起来你应该使用这种方法，尽管根据他们的博客文章，已弃用的方法仍然有效。