CODEWITHSUNDEEP
csstwitter-bootstrappolymer
Tal Yaari
Tal Yaari

Reputation: 461

Polymer don't like Bootstrap on chrome?

I saw several questions on this topic in here but I can't get it work for me. I use Polymer elements with Bootstrap and it seems like the polymer elements ignore Bootstrap's css. I tried to link the CSS inside the Polymer elements but it did not fix the problem. For example, This is my Polymer element "tal-button.html":

<link rel="import" href="../components/bower_components/polymer/polymer.html">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrapValidator.min.css" rel="stylesheet">

<polymer-element name="tal-button" attributes="">
    <template>
        <button class="btn btn-success">I'm a Bootstrap Button</button>
    </template>
    <script>
    Polymer({
    });
  </script>
</polymer-element>

My index.html looks like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tal Buttons</title>
        <script src="components/bower_components/webcomponentsjs/webcomponents.min.js"></script>
        <link rel="import" href="elements/tal-button.html">

        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- BootstrapValidator -->
        <link href="css/bootstrapValidator.min.css" rel="stylesheet">
        <!-- jQuery -->
        <script src="js/jquery-1.11.0.min.js"></script>
    </head>
    <body>
        <section>
            <button class="btn btn-primary">Cool</button>

            <tal-button></tal-button>
        </section><!-- /#intro -->
    </body>
</html>

The "Cool" Button is displayed well, but the Tal-Button is displayed as a regular button and it didn't get the Bootstrap style.

Any help will be appreciated. Thanks!

Upvotes: 1

Views: 110

Answers (1)

Dirk Grappendorf
Dirk Grappendorf

Reputation: 3422

You need to put the stlyesheet imports into the <template>...</template> tag.

Only then are these CSS definitions visible inside the shadow dom of your tal-button element.

Upvotes: 1

Related Questions