Javascript 使用聚合物而不使用机器人

Javascript 使用聚合物而不使用机器人,javascript,css,polymer,polymer-2.x,html-imports,Javascript,Css,Polymer,Polymer 2.x,Html Imports,我有一个Polymer 2应用程序,在加载任何组件之前指定了一个显式的--纸张字体公共基础: --paper-font-common-base: { font-family: 'Comic Sans'; /* Not really, nobody's that evil, but problem is there for any font */ }; 然后,在加载聚合物组件时,例如,将导入typography.html <link rel="import" href="

我有一个Polymer 2应用程序,在加载任何组件之前指定了一个显式的
--纸张字体公共基础

--paper-font-common-base: {
    font-family: 'Comic Sans'; 
    /* Not really, nobody's that evil, but problem is there for any font */
};
然后,在加载聚合物组件时,例如,将导入
typography.html

<link rel="import" href="../paper-styles/typography.html">
这会覆盖我指定的字体,但也会从中下载Roboto,我明确不希望它这样做

例如,其他聚合物组分采用不同的方法:

/*
This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
*/
如何设置
--纸张字体公共基
,以便聚合物组件使用与我的应用程序其余部分相同的字体?

在我看来,就像
被包装在
标签中一样,它直接加载到您的
标签中


要克服这种行为,您还需要将脚本添加到
标记的更高位置。

解决此问题的一种方法是使用空的
roboto.html
文件创建自己的
字体roboto
依赖项。然后在您的bower.json中,您将强制您的依赖项成为
字体roboto
冲突的解决方案。

我建议这样做

  • 分叉
    ,并删除导入
    排版.html
  • 加载您自己的
  • 如果您的更改被正式接受,请再次加载正式的

  • 如果您想在整个web应用程序上使用此字体,您的

    --paper-font-common-base: {
        font-family: 'Comic Sans';
    };
    
    是否声明为
    自定义样式
    元素

    如果没有,请尝试:

    <custom-style>
      <style>
            html {
                --paper-font-common-base: {
                    font-family: 'Comic Sans'; 
                };
            }
      </style>
    </custom-style>
    
    
    html{
    --纸张字体通用库:{
    字体系列:'漫画无';
    };
    }
    
    如果将其添加到根元素中,则应将其应用到所有子元素中,除非某些自定义组件覆盖其自己的字体

    编辑:
    有一个例子。

    中。bowerrc
    添加以下内容:

    {
      "scripts": {
        "postinstall": "node -e \"require('fs').writeFileSync('bower_components/font-roboto/roboto.html', '')\""
      }
    }
    

    它将使
    roboto.html
    成为一个空文件,在构建后不会出现任何错误请求。

    您从哪里获得这些信息?问题中引用的
    是在
    排版中导入的。html
    (部分,不是我的代码)-在请求导入之前,我对
    --纸质字体公共基础的定义已经加载。不确定-我只是看到了标签,以为它一定在标签中。另一个显而易见的尝试是!重要的是,但我想你不会想尝试这个,或者作为一个长期使用@font-face并将其命名为Roboto作为解决方法???你在哪里看到了
    标签<代码>!重要信息
    CSS规则上的标志在最好的情况下是一个不好的标记,但它对影子DOM根本没有帮助,因为样式没有层叠。
    我可能有错误,因为我的答案是相当假定的,因为我看不到网站,也看不到元素我不确定,但不是
    html,纸张对话框{--paper-…}
    够了吗?只需在html之后添加纸质对话框,即可将css直接应用于纸质对话框。另一个选择是在您的应用程序中定义`--paper-font-common-base`之前,自己导入
    typography.html
    style@Kuba西蒙诺夫斯克ý不管怎样,它都会导入
    typography.html
    ,而首先自己导入它仍然会添加我不需要在覆盖它们之前加载到页面中的请求。指定特定控件并不能阻止此操作,即使我有一个所有控件的最终列表。这将停止覆盖字体,但也会导致其他请求和错误。干杯。作为最后的手段,我可以这样做,但是有很多聚合物组件可以这样做,大约一半的
    纸张-*
    组件,而不仅仅是
    纸张对话框
    。首先,我想确定没有更好的方法可以做到这一点。我已经提出了和,但还有更多的地方可以做到。是的,
    包装器正是我正在做的(没有它,mixin根本无法工作),自定义组件覆盖自己的字体正是我在问题中描述的问题。如何阻止Polymer自定义元素(专门来自Polymer OSS团队的元素)覆盖Polymer为全局样式提供的mixin
    --纸质字体公共基?我创建了一个。为了设置排版,我必须将
    typography.html
    导入
    mycustomstyle.html
    元素。颜色变量也是一样,没有默认主题.html
    import,它就不起作用了。这看起来很有效,是一个聪明的解决办法,但仍然下载排版和机器人,然后重载它们。理想情况下,我不想下载我的应用程序不需要的任何资源。对于一个不应该首先请求的空文件,这仍然是一个往返过程。如果我要对库进行后期处理,我会删除对该文件的引用,而不是清空该文件。@Keith嗯,这是解决这个问题的最快方法,除非您想查看所有
    纸张
    元素。在这种情况下,您的后期处理脚本将更大。由于
    polymer build
    将把空文件合并到主捆绑包中,因此不会发出任何其他请求。所以清空文件更好,除非您使用推送协议并为其构建。
    {
      "scripts": {
        "postinstall": "node -e \"require('fs').writeFileSync('bower_components/font-roboto/roboto.html', '')\""
      }
    }