External Style Sheet in a Polymer Custom Element

Question

External Style Sheet in a Polymer Custom Element

I am wrapping a third-party control in a polymer 1.1 user control. The control comes with a CSS file that I want to use for my custom element. What is the recommended approach for this? Some of the possible options that come to mind are as follows:

Include a plain old link tag that points to my css file in my custom element
Use HTML import.
Polymer 1.1 has a new concept called style modules, which is supposed to replace external power sheets as described in the polymer documentation: https://www.polymer-project.org/1.0/docs/devguide/styling.html Another approach - specify an external stylesheet in the style module?

I don't know if any of the above approaches are possible for my scenario.

Update

I tried to use the style module, as suggested in one of the answers below, but for some reason the third-party css file specified in the style module did not load. Any idea why?

My style is 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>