1

問題：

<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も使用すると、サイトが 2 回ロードされますbootstrap.cssbootstrap.css

これは Web コンポーネントの制限ですか? これはPolymerの問題ですか？

ありがとう！

フラン

4

2 に答える 2

4

現在、テンプレート内でインポートを使用して、要素にスコープされた CSS を読み込むことはできません。これは機能しないことが知られています。

使用するというあなたの最初のアイデアはsimple old link pointing to bootstrap.css行くべき道です.その概念は、ユーザーエージェントがそのCSSを共有するのに十分スマートであるべきだということです.

現在時々見られる二重読み込みは、ブラウザーのバグであると考えています。一時的に我慢できるならそれでいい。残念ながらbootstrap.css、CSS はスコープ指定された CSS を念頭に置いて作成されていないため、カスタム CSS よりもこの問題を拡大します。

于 2014-03-29T20:15:14.790 に答える
0

HTML インポートを使用して外部 CSS をロードすることは、Polymer 1.0で実験的な機能としてサポートされるようになりました ( https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets )。

（まだ0.5からアップグレードしていないので、自分で試していません:)）

于 2015-06-07T16:14:38.350 に答える