Use a remote stylesheet inside a template tag (with shadow dom)

I came across the same problem recently. What I ended up doing was using:

<template id="templateContent">
     <style> @import "css/generalStyle.css"; </style>
</template>

Additional info: This worked just fine except that now I'm having some cache issues as Chrome does not seem to reload those resources after a hard reload.

Let add to the answer . Now direct tag is supported in shadow dom.

You can directly use

<link rel="stylesheet" href="yourcss1.css">
<link href="yourcss2.css" rel="stylesheet" type="text/css">  

Check they has been update by whatwg and W3C

Useful link for using css in shadow dom.

https://w3c.github.io/webcomponents/spec/shadow/#inertness-of-html-elements-in-a-shadow-tree https://github.com/whatwg/html/commit/43c57866c2bbc20dc0deb15a721a28cbaad2140c

https://github.com/w3c/webcomponents/issues/628

Direct css link can be use in shadow dom

Thanks.