Question

我将第三方控件包装在聚合物1.1自定义元素中。该控件带有一个CSS文件，我希望将其范围扩展到我的自定义元素。这样做的推荐方法是什么？想到的一些可能的选择是：

在我的自定义元素
使用HTML导入。
在Polymer 1.1中，有一个新概念称为样式模块，根据聚合物文档应该取代外部sylesheets： https://www.polymer-project.org/1.0/docs/devguide/styling.html 另一种方法是在样式模块中指定外部样式表吗？

我不知道上述方法中的任何一种方法是否适合我的方案。

更新

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

我的风格，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（示例）：

<!-- 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/似乎就像你应该使用这种方法，虽然被弃用的仍然可以根据他们的博客文章。

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

1 个答案: