Question

我如何定义以下内容：

<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。但我不能为bf-tab生成一个元素，因为我需要以不同的方式应用它两次（一次用于ul nav-tabs，一次用于tab-content）。

如何做到这一点？

Answer 1

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

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

Answer 2

你可以通过插入点和:nth-of-type做一些聪明的事情来在活动时呈现正确的标题/内容。

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

如何重新排列聚合物模板含量？

2 个答案: