Problems nesting Polymer elements on Chrome.

[johnm...@gmail.com]

Hello.  I'm in the middle of developing a music portal site.  I decided to try using Polymer to be able to factor out part of the code.  One page have various categories of music and shows albums that come from that category.  I'm using the Bootstrap "jumbotron" element to highlight each category.  What I've done so far looks great on Firefox and Internet Explorer but it goes haywire when I use Chrome.  I would think the opposite would be true.

Anyway, here's what I did.  I have a database that sends a JSON document over sample albums, cover art, title and artist name to the webpage.  I've created two Polymer elements, album-element and albumcat-element.  The "albumcat-element" is the jumbotron itself.  It uses the "album-element" to format each element.  I noticed that I had to include the bootstrap css and js files in each Polymer element document in order for things to look even halfway decent on Chrome.  (I did NOT have to do that for Firefox).  And yes, I'm running the latest version of Chrome.  I checked to be sure.  So here's the code.

albumcat-element.html

<link rel="import" href="../components/polymer/polymer.html"/>

<link rel="import" href="./album-element.html"/>

<link href="../../css/bootstrap.min.css"/>

<link href="../../css/bootstrap-responsive.min.css"/>

<link href="../../css/web2py_bootstrap.css"/>

<script src="../../js/jquery.min.js"></script>

<script src="../../js/bootstrap.min.js"></script>

<polymer-element name="albumcat-element" attributes="albumlist header backcolor">

    <template>

        <style>

            .title1 {

                text-align : center;

                font-size: 56px;

            }

            .title2 {

                text-align : center;

                font-size: 30px;

                color: red;

            }     

            .jumbotron {

                background-color: {{backcolor}};

                border-style: solid;

                border-bottom-color: black;

                border-top-color: transparent;

                border-left-color: transparent;

                border-right-color: transparent;

            }

        </style>

        <div class="jumbotron">

            <div class="container">

                <p class="title1">{{header}}</p>

                <p class="title2">Click On Album To Preview</p>

                <div class="row">

                    <template repeat="{{album in albumlist}}">

                        <album-element link = "{{album.link}}" artist = "{{album.artist}}" album = "{{album.title}}" cover="{{album.cover}}">

                        </album-element>

                    </template>

                </div>

            </div>

        </div>

    </template>

    <script>

        Polymer({

            // These default values are overridden

            // by the user's attribute values.

            header : "Music Category",

            albumlist : [],

            backcolor: "lightgrey"

        });

    </script>

</polymer-element>

album-element.html

<link rel="import" href="../components/polymer/polymer.html">

<link href="../../css/bootstrap.min.css"/>

<link href="../../css/bootstrap-responsive.min.css"/>

<link href="../../css/web2py_bootstrap.css"/>

<script src="../../js/jquery.min.js"></script>

<script src="../../js/bootstrap.min.js"></script>

<script type="text/javascript" src="../../js/jquery.js"></script>

<polymer-element name="album-element" attributes="link artist album cover">

    <template>

        <style>

            .albumlabel {

                text-align : left

            }

        </style>

        <div class="col-xs-6 col-md-3">

            <a href="{{link}}">

                <content select="img"></content>

                <img src="{{cover}}" class="img-responsive img-rounded"/>

            </a>

            <h5 class="albumlabel">{{album}}<br/>

                <small class="albumlabel">{{artist}}</small>

            </h5>

        </div>

    </template>

    <script>

        Polymer({

            // These default values are overridden

            // by the user's attribute values.

            link : "#",

            artist : "sample artist",

            album : "sample title",

            cover : ""

        });

    </script>

</polymer-element>