我在这里看到了几个关于这个主题的问题，但我无法解决这个问题。 我在 Bootstrap 中使用 polymer 元素， polymer 元素似乎忽略了 Bootstrap 的 css。我尝试链接 Polymer 元素内的 CSS，但没有解决问题。例如，这是我的 Polymer 元素“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”Button 显示良好，但 Tal-Button 显示为常规按钮并且没有获得 Bootstrap 样式。
任何帮助将不胜感激。谢谢!
最佳答案
您需要将 STLyesheet 导入到 <template>...</template> 中标签。
只有这样，这些 CSS 定义才能在您的 tal-button 的影子 dom 中可见。元素。
关于css - Polymer 不喜欢 chrome 上的 Bootstrap？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30150553/