无法使用自定义 CSS Mixins 在 Polymer 1.0 中设置抽屉面板的样式答案

【问题标题】：Unable to style paper-drawer-panel in Polymer 1.0 using Custom CSS Mixins无法使用自定义 CSS Mixins 在 Polymer 1.0 中设置抽屉面板的样式
【发布时间】：2015-05-29 20:05:03
【问题描述】：

我正在尝试使用 here 中提到的自定义 CSS 混合来设置纸抽屉面板的样式。 paper-drawer-panel.css 文件适用

@apply(--paper-drawer-panel-left-drawer-container);
@apply(--paper-drawer-panel-main-container);

分别用于抽屉和主容器。但是，使用 mixins 设置的样式似乎不起作用
下面是我用过的纸抽屉面板演示代码。

<html>
      <head>
        <title>paper-drawer-panel demo</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">

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

        <link rel="import" href="bower_components/paper-styles/paper-styles.html">
        <link rel="stylesheet" href="bower_components/paper-styles/demo.css">

        <link rel="import" href="bower_components/paper-button/paper-button.html">
        <link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">

        <style>
        #drawerPanel {
        --paper-drawer-panel-left-drawer-container: {
          background-color: #eee;
        };
        --paper-drawer-panel-main-container: {
          background-color: gray;
        };
      }
        </style>
      </head>

      <body class="unresolved fullbleed">

        <paper-drawer-panel id="drawerPanel">
        <div drawer> 
            <div>Drawer content... </div>
        </div>
        <div main>
            <div>
              <paper-button paper-drawer-toggle raised>toggle drawer</paper-button>
            </div>
          </div>
        </paper-drawer-panel>
      </body>
</html>

https://elements.polymer-project.org/elements/paper-drawer-panel 的文档指出这也是有效的。

造型纸抽屉面板：

更改主容器：paper-drawer-panel { --paper-drawer-panel-main-container：{背景颜色：灰色； }; }

要在抽屉容器位于左侧时更改它：纸抽屉面板 { --paper-drawer-panel-left-drawer-container: { 背景颜色：白色； }; }

那么，我在试图让这个简单的事情发挥作用时做错了什么？

【问题讨论】：

标签： css polymer mixins

【解决方案1】：

我还在测试 Polymer 1.0 的新样式模式。看来需要在style标签中加上is="custom-style"。

【讨论】：

这似乎奏效了。文档中解释的演示没有使用is="custom-style"。如果我们在另一个元素中设置元素的本地 dom，可能就是这样。我想我需要进行更多测试。
是的，它在元素之外。我找到了一个可能有用的documentation
在 1.0 之前，您必须像