聚合物2.0从主文档中分发儿童的造型组件

我试图在聚合物2.0中设计一些分布式子代。我似乎无法按照文档工作。聚合物2.0从主文档中分发儿童的造型组件

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

我能在聚合物1.x中使用

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

这是我的高分子2.0安装程序试图改变纸质标签的风格做到这一点的.tab内容

<!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>

来源

2017-06-16 Rhys

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

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

来源

2017-06-21 01:01:01 RivG

感谢您的回复。总之，它看起来不可能设计.tab-content div，但是你可以使用你的方法得到相同的结果。谢谢！ – Rhys

@Rhys，如果可以，请将此标记为答案！ – RivG

感谢RivG的帮助，您确实提供了一种替代方案，但具体来说，我实际上无法通过类来设计.tab内容和看似任何分布式子项。 – Rhys

它看起来并不像它的可能目标.TAB内容特别。

首先，:: content被替换为:: slotted，但在这个例子中仍然不起作用。 https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom#stylinglightdom

您可以使用暴露的mixin作为RivG也提到。 - 纸张标签内容

来源

2017-06-22 04:45:30 Rhys

聚合物2.0从主文档中分发儿童的造型组件

回答

相关问题