Html 如何在Polymer中使用新的css功能？_Html_Css_Polymer

Html 如何在Polymer中使用新的css功能？

html css polymer

Html 如何在Polymer中使用新的css功能？,html,css,polymer,Html,Css,Polymer,我正在尝试更改纸张标题面板上的css。根据Polymers网站上的文档，我可以通过以下方法简单地改变阴影： paper-header-panel { --paper-header-panel-shadow: { height: 6px; bottom: -6px; box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4); }; } 可悲的是我不能让它工作。。。我还试图更改纸张工具栏上的颜色，但它也不

我正在尝试更改纸张标题面板上的css。根据Polymers网站上的文档，我可以通过以下方法简单地改变阴影：

paper-header-panel {
  --paper-header-panel-shadow: {
      height: 6px;
      bottom: -6px;
      box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
  };
}

可悲的是我不能让它工作。。。我还试图更改纸张工具栏上的颜色，但它也不起作用

这是我的密码：

<!doctype html>
<html>
<head>
<!-- Polymer -->
<script src='bower_components/webcomponentsjs/webcomponents.js'></script>
<link rel='import' href='bower_components/polymer/polymer.html'>
<link rel='import' href='bower_components/paper-header-panel/paper-header-panel.html'>
<link rel='import' href='bower_components/paper-toolbar/paper-toolbar.html'>
<link rel='import' href='bower_components/paper-icon-button/paper-icon-button.html'>

<meta charset='utf-8'>
<title>Test</title>

<style>
paper-header-panel {
  --paper-header-panel-shadow: {
      height: 6px;
      bottom: -6px;
      box-shadow: inset 0px 5px 6px -3px rgba(0, 255, 0, 0.4);
  };
}
paper-toolbar {
  --paper-toolbar-background: green;
  --paper-toolbar-color: white;
}
</style>
</head>
<body class='fullbleed layout vertical'>
  <paper-header-panel class='flex'>
    <paper-toolbar>
      <div>Title</div>
    </paper-toolbar>
  </paper-header-panel>
</body>
</html>


试验
纸头面板{
--纸张标题面板阴影：{
高度：6px；
底部：-6px；
盒影：插入0px 5px 6px-3px rgba（0,255,0,0.4）；
};
}
纸张工具栏{
--纸张工具栏背景：绿色；
--纸张工具栏颜色：白色；
}
标题

哪里出了问题？我找到了原因。我必须将我的样式设置为

is='custom-style'

<style is='custom-style'>
paper-header-panel {
  --paper-header-panel-shadow: {
      height: 6px;
      bottom: -6px;
      box-shadow: inset 0px 5px 6px -3px rgba(0, 255, 0, 0.4);
  };
}
paper-toolbar {
  --paper-toolbar-background: green;
  --paper-toolbar-color: white;
}
</style>


纸头面板{
--纸张标题面板阴影：{
高度：6px；
底部：-6px；
盒影：插入0px 5px 6px-3px rgba（0,255,0,0.4）；
};
}
纸张工具栏{
--纸张工具栏背景：绿色；
--纸张工具栏颜色：白色；
}