关于CSS：聚合物不喜欢Chrome上的Bootstrap？


Polymer don't like Bootstrap on chrome?

我在这里看到了有关此主题的几个问题，但我无法使其正常工作。
我在Bootstrap中使用了Polymer元素，但似乎Polymer元素忽略了Bootstrap的css。我试图将CSS链接到Polymer元素内，但未能解决问题。例如，这是我的Polymer元素" tal-button.html "：

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>
   
    Polymer({
    });
 
</polymer-element>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        Tal Buttons
        <script src="components/bower_components/webcomponentsjs/webcomponents.min.js">
        <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">
    </head>
    <body>
        <section>
            <button class="btn btn-primary">Cool</button>

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

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

任何帮助将不胜感激。谢谢！

您需要将样式表导入放置到<template>...</template>标签中。

然后这些CSS定义才在tal-button元素的阴影dom内部可见。