Reusing css libraries through out Polymer elements

[franleplant]

Hey Guys!

I cant seem to make this work:

tag.html

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

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


    <div>
      <span class="name">{{ name }}</span>
      <span>{{ score }}</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', {
      greeting : '\'Allo'
    });

  </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?

Ill enjoy being useful.

Fran

[robdodson]

Hey @franleplant,

Would you mind asking this question over on StackOverflow? When you ask the question make sure to tag it with polymer so we can find it. We try to only open Github issues for bugs and feature requests.

Thanks!

[franleplant]

Hey @robdodson!
This might be both a Bug or a Feature Request with the correct assessment.

But anyway, I'll ask over Stack Overflow.

Thanks!

[arvindr21]

@franleplant Can you pls share the SO link? I am stuck with the same issue. -Thanks.

[franleplant]

@arvindr21 http://stackoverflow.com/questions/22733896/polymer-custom-elements-reusing-css-with-import

This is a big subject in respect of web components draft, will the browser handle this duplicate requests? How will it handle requests for the same library to different URL, etc. Its complicated.

It looks like the best way to go right now is to have the libraries globally, and also it looks like its better to create little components, instead of like components.

Also one other thing to take in account is that maybe in the future, when the Web Components spec is completed, libraries will be rethinked into web components, so instead of trying to create a component that uses a library, you will use the library through componets, or something like that, I dont know Im just thinking jajajaja.

I hope this help.

[arvindr21]

@franleplant Thanks! that was helpful.

My idea is also very similar. I wanted to take the Bootstrap framework and convert it into components like bs-button, bs-navbar and so on. And I would like to create another core element named bs-theme-cosmo, which consist of a BS theme and if the current page has a reference to the BS theme element, all the components will be styled accordingly. This way I can create multiple theme components and drop it on to the page.

Now the question is should each component inherit the theme for the component to work? or Can we add a global reference? I hope you notice the problem including the framework CSS/JS with every component. And I feel that including the theme CSS/JS using the link & script tags is not much of "componentizing".

I do understand about the encapsulation of styles inside an web component but still want the theme component to "leak". Not sure even if my thinking is correct. So what would be a preference here?

Thanks.

[franleplant]

That is a question for a more knowledgeable man than me, Ill be happy to see others opinions on the subject though.

Fran