[英]Import external stylesheets in polymer 3
Is there a way to import external css files that only affects the shadow DOM? 有没有办法导入只影响影子DOM的外部css文件? I am working with sass and creating the css files automatically, so any tricks using javascript imports can't be done.
我正在使用sass并自动创建css文件,因此任何使用javascript导入的技巧都无法完成。
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: 在Polymer 2中,可以执行以下操作:
<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? 聚合物3是否有同样的方法?
You can use variables in html-tag, like this: 您可以在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>...`;
...
}
...
}
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. 请注意:您必须将变量从字符串转换为htmlLiteral才能在
html-tag
使用它,但我不知道为什么Polymer不直接支持原始字符串变量。 good luck! 祝好运!
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>
`;
Lastest approach provided by polymer 3 official documentation here. 这里聚合物3官方文档提供了最新方法。 ctrl+f and Search for
Share styles between elements
click here ctrl + f和搜索
Share styles between elements
单击此处
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.