How to use external css in Polymer

[papy...@gmail.com]

Hi,

I try to use Stimulsoft Reports.JS (https://www.stimulsoft.com/en/products/reports-js) as a web component.

I succeeded to import external JavaScript to use their functions in my component.

However I do not understand how can I import their css files. It works easily with an 

<link href="css/stimulsoft.viewer.office2013.whiteblue.css" rel="stylesheet">

for a basic html file. But it doesn't work for a web component in Polymer.

I do not have any error, the file is recovered by Polymer but it's like the code inside is not used...

The css is minified and it's in a file, I do not want to modify it. I just want to import it and apply it on my component. How can I do this with Polymer ?

Thanks in advance.

[papy...@gmail.com]

This is not possible ?

[Jouni Koivuviita]

You need to convert the external stylesheet into a style module, and include that inside your component. Regular stylesheet imports end up at the root level of the page, and won’t affect elements inside shadow roots, including Polymer elements.

https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules

That’s for Polymer 1.x, but it’s the same for 2.x as well.

HTH,

Jouni