Question

我正在尝试在Polymer 2.0中为一些分布式子项设置样式。我似乎无法按照文档进行操作。

https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom

我可以使用

在Polymer 1.x中执行此操作

<style is="custom-style">
        paper-tabs ::content .tab-content {
            background:red;
        }
      </style>

这是我的Polymer 2.0设置试图改变纸张标签的样式.tab-content

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
        <link rel="import" href="bower_components/polymer/lib/elements/custom-style.html">
    </head>
    <body>
        <custom-style>
          <style>
            paper-tabs .tab-content {
                background:red;
            }
          </style>
        </custom-style>
        <paper-tabs selected="0" scrollable>
            <paper-tab>The first tab</paper-tab>
            <paper-tab>Tab two</paper-tab>
            <paper-tab>The third tab</paper-tab>
            <paper-tab>Fourth tab</paper-tab>
        </paper-tabs>
    </body>
</html>

Answer 1

如果您只想更改标签的背景颜色，请执行以下操作：

paper-tabs {
    background:red;
}

如果您想设置标签内容的样式，可以使用一些纸张标签样式：

--paper-tab-content -- Mixin applied to the tab content
--paper-tab-content-unselected -- Mixin applied to the tab content when the tab is not selected

取自：https://www.webcomponents.org/element/PolymerElements/paper-tabs/elements/paper-tab

Answer 2

看起来它可能无法专门针对.tab内容。

首先，:: content替换为:: slotted，但在此示例中仍然无效。 https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom#stylinglightdom

您可以使用暴露的mixin，也可以使用RivG。 --paper标签含量

Polymer 2.0样式组件分发来自主文档

2 个答案: