1

问题：

我似乎无法制作<i>标签来呈现 Bootstrap 图标，它无法识别 Bootstrap 提供的类：

诊断要素

标记.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索引中使用，该站点将加载两次bootstrap.css

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

谢谢！

弗兰

4

2 回答 2

4

您现在不能在模板中使用导入来将 CSS 范围内的 CSS 加载到您的元素，这已知是行不通的。

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

我们认为您今天有时会看到的双重加载是浏览器错误。如果您可以暂时忍受它，那就是要走的路。不幸bootstrap.css的是，没有考虑到作用域 CSS，所以它比自定义 CSS 更放大了这个问题。

于 2014-03-29T20:15:14.790 回答
0

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

（还没有尝试过自己，因为我还没有从 0.5 升级 :) ）

于 2015-06-07T16:14:38.350 回答