Question

我开始使用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时，您会注意到当屏幕足够小并且标签显示为打开左侧菜单栏时，它是正常的＆＃39;按钮而不是纸张。由于这是core-scaffold，我不知道如何更改（如果可能的话）。有什么想法吗？

Answer 1

我遇到了同样的问题，事实证明你可以使用CSS使用CSS来设置其他元素（core-scaffold）中的元素（工具栏），以访问内部组件（在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

更新：由于填充程序，这对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。

Answer 2

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

聚合物核心脚手架着色和纸按钮

2 个答案: