在聚合物3中导入外部样式表

Question

有没有办法导入只影响影子DOM的外部css文件？我正在使用sass并自动创建css文件,因此任何使用javascript导入的技巧都无法完成.

现在,我所拥有的是:

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

在Polymer 2中,可以执行以下操作:

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

聚合物3是否有同样的方法？

Answer 1

您可以在 html-tag 中使用变量，如下所示：

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>...`;
    ...
  }
  ...
}

请注意：您必须将变量从字符串转换为 htmlLiteral 才能在 中使用它html-tag，尽管我不知道为什么 Polymer 不直接支持原始字符串变量。祝你好运！