不幸的是，我发现当前缺少一些使用 paper 样式的文档/示例。我不是一个经验丰富的CSS专家(实际上是相对的新手)，所以我可以真正使用一些示例来说明如何实现Polymer 1.0应用程序范围内的样式，以便其所有自定义元素都可以使用(即，通过将类应用于标签中的任何标签)这些自定义元素的本地DOM)。我在使用核心样式的Polymer 0.5中相对容易地做到了这一点，但是在1.0中它已经发生了足够的变化，使我感到困惑，尤其是在没有完整的文档/示例可供使用的情况下。似乎也有几种方法可以实现此目的。我还想知道 paper 样式在1.0中是否仍被认为是实验性的？尽管在聚合gitHub存储库中确实遇到了“一些”问题，但在 polymer 1.0在线元素目录(https://elements.polymer-project.org/elements/paper-styles)中没有使用任何文档或示例。
最佳答案
当缺少文档时，您可以做的一件事是搜索其他使用您要使用的代码的项目。例如，paper-tabs使用paper-styles。您可以在paper-styles/color.html中看到导入paper-tabs.html的示例。 --paper-yellow-a100中使用了paper-tabs.html值。以下是使用var中定义的各种CSS变量(@apply)和mixins(paper-styles)将样式应用于主文档的示例。
<!DOCTYPE html>
<html>
<head>
<title>paper-styles Example</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="bower_components/paper-styles/paper-styles.html" />
<style is="custom-style">
.shadow {
@apply(--shadow-elevation-16dp);
}
section {
background-color: var(--google-blue-700);
}
p {
@apply(--paper-font-display3);
}
</style>
</head>
<body>
<section class="shadow">
<h1>Example</h1>
<p>
This is an example using <em>paper-styles</em>.
</p>
</section>
</body>
</html>
Click here to learn more about styling in Polymer 1.0.
关于 paper 样式是否具有实验性的问题，在Polymer home page in the catalog section上指出:
但是，在网站上的各个位置(包括styling)，都提到了实验功能。
这时使用
@apply将被视为实验性的。在Polymer网站上有一个名为Experimental features & elements的页面，您可以查看更多信息。
关于polymer - Polymer 1.0 paper 样式元素的用法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31465141/