Import external stylesheets in polymer 3

Question

Is there a way to import external css files that only affects the shadow DOM? I am working with sass and creating the css files automatically, so any tricks using javascript imports can't be done.

Right now, what I have is:

static get template() {
return html`
  <style>
  :host {
    display: block;
  }
  </style>
  ....
}

In Polymer 2, it was possible to do something like:

 <dom-module id="my-app">
   <link rel="stylesheet" href="style.css">
   <template></template>
 </dom-module>

Is there a Polymer 3 way of acheving the same thing?

Allege

By "tricks using javascript imports" you also mean require()ing the .css files at runtime? – Demp

I mean that I can't/don't want to make the compiled css file be a javascript string. I want the output of the css file to have just css content. Let me know if that is not clear. – Wilke

Answer 1

You can use variables in html-tag, like this:

import { htmlLiteral } from '@polymer/polymer/lib/utils/html-tag.js';

import myCSS from "style.css";
let myCSSLiteral = htmlLiteral(myCSS);
...
class MyElement extends PolymerElement {
  static get template() {
    return html`<style>${myCSSLiteral}</style>...`;
    ...
  }
  ...
}

Please note: You have to convert variable from string to a htmlLiteral for using it in html-tag, though I do not know why Polymer does not support raw string variable directlly. good luck!

Agrarian

Answer 2

this works great for me!

return html`
      <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
      <style>

/* I had to put !important to override the css imported above. */
      </style>

      <divclass="blablabla"></div>
    `;

Hyunhz