2

我将如何定义以下内容：

<bf-tabnavigator>    
  <bf-tab>
    <bf-tab-title><a href="#home">Home</a></bf-tab-title>
    <bf-tab-content>My Content</bf-tab-content>
  </bf-tab>      
  <bf-tab>
    <bf-tab-title><a href="#b">B</a></bf-tab-title>
    <bf-tab-content>My B</bf-tab-content>
  </bf-tab>  

</bf-tabnavigator>

作为一种聚合物元素，可以有效地转化为

 <ul class="nav nav-tabs">
    <li><a href="#home">Home</a></li>
    <li><a href="#b">B</a></li>
 </ul>

 <div class="tab-content">
    <div class="tab-pane" id="home">My Content</div>
    <div class="tab-pane" id="b">My B</div>    
 </div>

我无法在 bf-tabnavigator 元素中生成选项卡，因为我无法执行类似的操作

 <ul class="nav nav-tabs">     
     <content select="bf-tab bf-tab-title"></content>
 </ul>

 <div class="tab-content">     
     <content select="bf-tab bf-tab-content"></content>
 </ul>

因为你只能选择 1-deep in 。但是我无法为 bf-tab 生成元素，因为我需要以不同的方式应用它两次（一次用于 ul nav-tabs，一次用于 tab-content）。

一个人是如何做到这一点的？

4

2 回答 2

1

我不认为这是可能的。即使输出看起来与您的示例相似，shadowDOM 也会创建一个屏障。您将无法使用 Bootstrap（或类似的）CSS。

您可以做的是使<content>不可见并克隆它s content into the`元素。这将产生一个有效的列表。当您在元素中引用 CSS 时，您甚至可以使用 Bootstrap 之类的 CSS（不确定这是否是意图）

于 2013-12-29T18:05:15.703 回答
0

您可以对插入点做一些聪明的事情，并:nth-of-type在它处于活动状态时呈现正确的标题/内容。

https://github.com/ebidel/polymer-experiments/blob/master/polymer-and-angular/together/elements/wc-tabs.html#L26

于 2014-01-01T03:25:21.693 回答