Polymer 2.x:如何定义外部样式表和/或@imports是否为shimmed

时间:2017-08-10 15:33:19

标签: polymer polymer-2.x

有一些问题正在进行,有很多人试图顽固地强制将外部css限定为Polymer元素。 通过勾或骗子

然后@import无法正常工作,或link rel=stylsheet没有范围的心碎 所以,

我如何作为聚合物元素的作者/消费者,范围外国样式表?

有哪些gotchas?是@import支持并填充?

1 个答案:

答案 0 :(得分:0)

我可以将外部CSS样式表限定在聚合物自定义元素

  

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-typeaccess-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,但我还没有使用它。