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

Posted 2023-01-27

有没有办法导入只影响影子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实现同样的方法？

答案

您可以在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不直接支持原始字符串变量。祝好运！

另一答案

这对我很有用！

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

另一答案

这里聚合物3官方文档提供了最新方法。 ctrl + f并搜索Share styles between elements click here