External stylesheet in Polymer custom element

Question

I'm wrapping a third-party control in a polymer 1.1 custom element. The control comes with a CSS file that I want to scope to my custom element. What is the recommended approach for doing this? Some possible options that come to mind are:

Include a plain old link tag that points to my css file in my custom element
Use an HTML import.
In Polymer 1.1 there's a new concept referred to as style modules which is supposed to supersede external sylesheets according to the polymer documentation: https://www.polymer-project.org/1.0/docs/devguide/styling.html Is another approach to specify an external stylesheet within the style module?

I don't know whether any of the above approaches are feasible for my scenario.

Update

I tried using a style module as suggested in one of the answers below but for some reason the third-party css file specified in the style module was not loading. Any idea why?

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 (sample):

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

mmm111mmm mmm111mmm · Accepted Answer · 2015-09-03T17:29:13

The 1.0 deprecated way is here https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets and I made a brief example here: http://polymerjs.newfivefour.com/post/126638694607/sharing-css-styles-across-elements Basically, you use the external CSS file you mentioned and use the custom import.

But now, as of 1.1, there's a new way, where you put your CSS into a component and include that via a HTML import and then a style include tag in the component: https://blog.polymer-project.org/announcements/2015/08/13/1.1-release/ It seems like you should use this approach, although the deprecated will still work according to their blog post.

External stylesheet in Polymer custom element

1 Answers