Web 元素上没有样式_Web_Polymer_Components_Styling

Web 元素上没有样式

web polymer

Web 元素上没有样式,web,polymer,components,styling,Web,Polymer,Components,Styling,我听说了谷歌聚合物，决定尝试一下。我在正确加载组件时遇到了一些问题。我的元素似乎没有任何颜色或任何东西当我从Google Polymer网站下载Starter Kit 1.0时，它看起来是这样的但是当我尝试导入到我自己的项目时，它看起来是这样的（功能正常）这是我的HTML <!DOCTYPE html> <html> <head> <title>DueDay</title> <!-- Googl

我听说了谷歌聚合物，决定尝试一下。我在正确加载组件时遇到了一些问题。我的元素似乎没有任何颜色或任何东西

当我从Google Polymer网站下载Starter Kit 1.0时，它看起来是这样的

但是当我尝试导入到我自己的项目时，它看起来是这样的（功能正常）

这是我的HTML

<!DOCTYPE html>
<html>

  <head>

    <title>DueDay</title>

    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700">

    <!-- Web Components -->
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

    <!-- Paper Elements -->
    <link rel="import" href="bower_components/paper-elements/paper-elements.html">

    <!-- Iron Elements -->
    <link rel="import" href="bower_components/iron-elements/iron-elements.html">

    <!-- App Layout -->
    <link rel="import" href="bower_components/app-layout/app-layout.html">

    <!-- Stylesheet -->
    <link rel="stylesheet" href="css/index.css">

  </head>

  <body>

    <app-header reveals>
      <app-toolbar>
        <paper-icon-button icon="search"></paper-icon-button>
        <div id="title" main-title>Tasks</div>
        <paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
      </app-toolbar>
    </app-header>
    <app-drawer id="drawer" align="end" swipe-open>
      <paper-menu class="drawer-menu">
        <paper-item>Item 1</paper-item>
        <paper-item>Item 2</paper-item>
      </paper-menu>
    </app-drawer>

  </body>

</html>

有人能告诉我为什么我的组件显示不正确吗

浏览器：谷歌浏览器55.0.2883.95版（64位）

感谢您的帮助！提前感谢。

您可以向元素添加一些自定义样式，就像文档中的样式一样


身体{
/*主体上没有边距，所以工具栏可以跨越屏幕*/
保证金：0；
}
应用程序工具栏{
/*工具栏是主标题，所以给它一些颜色*/
背景色：#1E88E5；
字体系列：“Roboto”，Helvetica，无衬线；
颜色：白色；
--应用程序工具栏字体大小：24px
}


决斗日
身体{
/*主体上没有边距，所以工具栏可以跨越屏幕*/
保证金：0；
}
应用程序工具栏{
/*工具栏是主标题，所以给它一些颜色*/
背景色：#1E88E5；
字体系列：“Roboto”，Helvetica，无衬线；
颜色：白色；
--应用程序工具栏字体大小：24px
}
任务
项目1
项目2

好的，我认为只有在创建新的DOM元素时才需要该文件。我试图包括该文件，但结果保持不变。工作完美！谢谢你的回答：-）

{
  "name": "DueDay",
  "description": "A simple to-do application",
  "main": "index.html",
  "authors": [
    "John Doe"
  ],
  "license": "MIT",
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "polymer": "Polymer/polymer#^1.7.1",
    "paper-elements": "PolymerElements/paper-elements#^1.0.7",
    "iron-elements": "PolymerElements/iron-elements#^1.0.10",
    "app-layout": "PolymerElements/app-layout#^0.10.6"
  }
}