Polymer 不喜欢 chrome 上的 Bootstrap？

Question

我在这里看到了几个关于这个主题的问题，但我无法解决这个问题。我将聚合物元素与 Bootstrap 一起使用，聚合物元素似乎忽略了 Bootstrap 的 css。我尝试 link 聚合物元素内的 CSS 但它没有解决问题。例如，这是我的聚合物元素 "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>

我的 index.html 看起来像这样：

<!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>

"Cool" 按钮显示良好，但 Tal-Button 显示为常规按钮并且没有获得 Bootstrap 样式。

如有任何帮助，我们将不胜感激。谢谢！

Answer 1

您需要将 stlyesheet 导入到 <template>...</template> 标签中。

只有这样，这些 CSS 定义才能在 tal-button 元素的阴影 dom 中可见。

Polymer 不喜欢 chrome 上的 Bootstrap？

Polymer don't like Bootstrap on chrome?

css

twitter-bootstrap

polymer