Question

问题：

我似乎无法使<i>标记呈现Bootstrap图标，它无法识别Bootstrap提供的类：

要诊断的元素

tag.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="polymer-tag" attributes="name">
  <template>
    <link rel="import" href="bootstrap.html">

    <style>
      :host { display: block; }
    </style>


    <div>
      <span class="name">{{ name }}</span>

      <!-- This classes are not recognized and the icon is not displayed -->
      <i class="glyphicon glyphicon-plus-sign"></i>

    </div>

  </template>
  <script>
    Polymer('polymer-tag', {...});

  </script>
</polymer-element>

我还尝试将导入移到<polymer-element>之外，但它也不起作用。

bootstrap.html包含以下内容：

<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">

如果不是导入而是加载指向bootstrap.css的简单旧链接，那么它可以正常工作，但是，如果我在索引中也使用bootstrap.css，则网站将加载两次{{1} }

这是Web组件的限制吗？这是聚合物的问题吗？

谢谢！

弗兰

Answer 1

您现在无法在模板中使用导入来加载作用于您的元素的CSS，这已知不起作用。

您最初使用simple old link pointing to bootstrap.css的想法是要走的路，概念是用户代理应该足够智能以共享该CSS。

我们认为您今天有时会看到双重加载浏览器错误。如果你可以暂时忍受它，那就是你要走的路。遗憾的是bootstrap.css并未考虑使用范围CSS，因此它比自定义CSS更能解决这个问题。

Answer 2

现在， Polymer 1.0 支持使用HTML导入加载外部CSS作为实验性功能（https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets）。

（Haven并没有尝试过，因为我还没有从0.5升级:)但

聚合物自定义元素：使用重要的css

2 个答案: