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

Question

我正在尝试更改纸张页眉面板上的 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>

哪里出了问题？

Answer 1

找到原因了。我必须将样式设置为 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>

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

How do I use the new css feature in Polymer?

html

css

polymer