聚合物芯支架着色和纸按钮答案

【问题标题】：Polymer core scaffold coloring and paper button聚合物芯支架着色和纸按钮
【发布时间】：2016-01-13 23:56:01
【问题描述】：

我开始使用polymer 0.5 代码来构建响应式网站。我知道它还没有完全完成，但我发现它非常简洁和简单，可以快速完成工作。

现在，我使用core-scaffold 作为总体布局。我知道如何为侧边栏着色，但我不确定在哪里可以设置主要内容设置的样式。

<html>
    <head>  
        <style>
            html,body {
                height: 100%;
                margin: 0;
                background-color: #E5E5E5;
                font-family: 'RobotoDraft', sans-serif;
            }

            core-toolbar {
                background: #E5E5E5;
                color: white;
            }

            paper-item.core-selected {
                color: #99182c;
                fill: #99182c;
            }
        </style>

    </head>

    <body unresolved touch-action="auto">

        <core-scaffold>

            <core-header-panel navigation flex mode="seamed">
                <core-toolbar style="background-color: #99182c; color:#fff;">Main site name</core-toolbar>
                <core-menu selected="0">
                    <paper-item icon="home" label="Home"></paper-item>
                    <paper-item icon="today" label="Activities"></paper-item>
                    <paper-item icon="account-box" label="People"></paper-item>
                    <paper-item icon="theaters" label="Pictures"></paper-item>
                    <paper-item icon="info" label="Info"></paper-item>
                    <paper-item icon="lock" label="Login"></paper-item>
                </core-menu>
            </core-header-panel>

            <div tool>Home</div>
        </core-scaffold>
    </body>
</html>

所以核心工具栏是左侧边栏的样式，但是我如何设置主页的样式？

我遇到的另一个问题是我想使用纸张元素。但是，当使用这个core-scaffold 时，您会注意到当屏幕足够小并且选项卡显示为打开左侧菜单栏时，它是一个“普通”按钮而不是纸质按钮。由于这是在core-scaffold 中，所以我不直接知道如何更改它（如果可能的话）。有什么想法吗？

【问题讨论】：

标签： polymer

【解决方案1】：

我遇到了同样的问题，事实证明，您可以使用 CSS 设置其他元素（核心脚手架）内部的元素（工具栏）样式，并使用特殊语法来访问内部组件（位于 Shadow DOM 内部）使用::shadow 伪元素。

第一条规则改变标题背景的颜色，而第二条规则改变内容区域的背景。

core-scaffold::shadow core-toolbar {
  background: #E5E5E5;
  color: black;
}

core-scaffold::shadow core-header-panel {
  background: #FFF;
  color: black;
}

来源：http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-cat-hat

更新：由于 shims，这在 Firefox 中无法正常工作。什么是使用 shim-shadowdom 指令添加样式，该指令仅在 a non webcomponent/shadowdom native platform 上被解释：

<style shim-shadowdom>
  core-scaffold core-toolbar {
    background: #EEE;
    color: black;
  }

  core-scaffold #main core-header-panel {
    background: #FFF;
    color: black;
  }
</style>

请注意，要更改内容区域的背景，我还必须选择 #main，因此移植 ::shadow 规则可能需要进行一些检查...

最后，当您需要在 webcomponent/polymer 元素中正确处理 Firefox 和其他浏览器时，您可以use the polyfill-rule or polyfill-unscoped-rule。

【讨论】：

【解决方案2】：

可以通过挖掘/bower_components/core-scaffold/core-scaffold.html中的标签并更改背景颜色来更改海军蓝色的样式；但是，这会更改所有默认值。

【讨论】：

它也是一个 div 的主标题，所以添加一个类和样式，如 thatT
您将丢失对 bower update 的所有修改。