javascript - polymer 自定义元素 : reusing css with import

Question

问题:

我似乎无法制作 <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 Components 的限制吗？这是 Polymer 的问题吗？

谢谢!

弗兰

Answer 1

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

您最初的想法是使用指向 bootstrap.css 的简单旧链接，这个想法是用户代理应该足够聪明以共享该 CSS。

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