聚合物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從主文檔中分發兒童的造型組件

回答

相關問題