Search code examples
javascriptcsshtmlpolymerweb-component

Polymer custom elements: reusing css with import

Problem:

I cant seem to make the <i> tag to render Bootstrap icons, it does not recognize the classes provided by Bootstrap:

Elements to Diagnose

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>

I have also tried to move the import outside <polymer-element> but it does not work either.

bootstrap.html contains this:

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

If instead of an import I load a simple old link pointing to bootstrap.css then it works, but, If I also use bootstrap.css in the Index, the site will load two times bootstrap.css

Is this a limitation of Web Components? Is this an issue of Polymer?

Thanks!

Fran

Solution

  • You cannot use an import inside a template today to load CSS scoped to your element, that's known not to work.

    Your original idea of using simple old link pointing to bootstrap.css is the way to go, the notion is that user agent is supposed to be smart enough to share that CSS.

    We consider the double loading you sometimes see today a browser bug. If you can live with it temporarily, that's the way to go. Unfortunately bootstrap.css was not written with scoped CSS in mind, so it magnifies this problem more than custom CSS would.