有一些问题正在进行,有很多人试图顽固地强制将外部css限定为Polymer元素。 通过勾或骗子
然后@import
无法正常工作,或link rel=stylsheet
没有范围的心碎
所以,
gotchas
?是@import
支持并填充?答案 0 :(得分:0)
TL; DR: 使用
link rel=import
并将外部样式表的网址传递给poly-style工具注意聚合物仍无法填充
@import
或外部网址,需要在填充之前进行提取 此外,<link rel=stylesheet...
不作用域,但可以使用。它也不会填充到您的元素中。
聚合物直到1.0定义了使用带有属性的<link>
标签
rel
= import
type
= css
以及href
只要遵守CORS
原则
一切都很奇特,我们都牵着手唱歌kumbaya
使用Polymer 2.0,实际上甚至是更高版本的聚合物1.0,
引入了一个名为style-modules
的东西,你封装了
dom-module
容器
<dom-module id="my-style">
<template>
<style>
.class_1{
/*all class_1 styles*/
}
.class_2{
/*all class_1 styles*/
}
.class_3{
/*all class_1 styles*/
}
</style>
</template>
</dom-module>
然后,您基本上将这些手写样式导入自定义元素
<link rel=import href=my-style.html />
<dom-module id="my-app">
<template>
<style include=my-style>
</style>
</template>
</dom-module>
哦Snap!现在,我必须首先复制整个样式表,然后将它们包装在<dom-module>
中
然后将它们导入我的应用程序!我们反驳道。
然后有很多关于重复数据删除和所有这些焦虑的问题
因此,首选或建议的解决方案是阅读和搜索样式表,并仅复制那些认为必要的类。
聚合物尚未摆脱已弃用的
<link rel=import type=css... />
css微光。
基本上,即使使用聚合物2.0,您也可以使用上述内容,虽然您现在需要将其实际放在<dom-module>
内。
聚合物垫片。
@import
规则 @imports
要求聚合物获取资源async
,因此无法保证填充 - 因此不支持。
现在在某些浏览器上,您可能会在开发控制台的阴影中看到这种情况:
Resource interpreted as Document but transferred with MIME type text/css: "https://a.b.com/additional.css".
这并不一定意味着资源没有被提取,但是如果你的网络服务器有一个no-sniff
,那就太哎了
或者任何内容完整性标头集,这意味着浏览器无法将css
解释为html
。
现在<link rel=import...
适用于HTML Imports
,这意味着,浏览器必须仅接受html
作为响应内容类型。
因此,style modules
是导入css并将css作用于组件时的最佳方法。
然后我如何导入外部样式表..说font-awesome
?
this web based style module builder for polymer
现在,这个网络工具正常为您提供了所需的content-type
和access-control
标头。
由于响应为text/html
,因此控制台上不再有警告。
简单,使用link rel=import
并将外部样式表的网址传递给多边形工具
<link rel="import" href="https://poly-style.appspot.com?id=poly-fa-style-module&url=https://use.fontawesome.com/releases/v4.7.0/css/font-awesome-css.min.css">
<dom-module id="poly-fa">
<template id="poly-fa-styler" strip-whitespace>
现在,您需要做的就是在应用中执行<style include=poly-fa>
。并且你有scoped
字体很棒。
<强>注意!强>
这将仍然不支持@import
此外,::slotted
DOM不能通过样式模块通过共享样式进行样式设置,除非在某些情况下,您将样式表导入层次结构中的更高元素
<强>咕嘟咕嘟强>
上述工具非常适合作者,他们可能选择不在自定义元素中为其组件预填充所需的外部样式,并在必要时获取外部css
对于可能希望在其组件中预先填充外部样式的人,我听说过gulp
插件here,但我还没有使用它。