如何让Shadow Dom与LIst一起工作？

Question

我正在使用Polymer来玩影子dom.我觉得应该是一个简单的用例,我无法完成工作.我想定义一个可以包含导航链接的"nav"容器.我希望它看起来如下:

<top-nav>
  <nav-link href="#a">A</nav-link>
  <nav-link href="#b">B</nav-link>
  <nav-link href="#c">C</nav-link>
  <nav-link href="#d">D</nav-link>
</top-nav>

以下是我为这两个元素创建的定义(使用Bootstrap主题样式):

<polymer-element name="top-nav" noscript>
  <template>
    <ul class="nav nav-tabs">
      <content></content>
    </ul>
  </template>
</polymer-element>

<polymer-element name="nav-link" attributes="href" noscript>
  <template>
    <li><a href="{{ href }}"><content></content></a></li>
  </template>
</polymer-element>

检查Shadow Dom,这两个元素似乎都独立工作 - top-nav创建a ul并nav-link创建li包含an a.问题是,li似乎不是孩子的ul.我在这里错过了什么？

Answer 1

这些li元素归 拥有nav-link。nav-link在这个设置中没有办法让树消失，所以你的树看起来像：

<top-nav>
  <ul>
    <nav-link>
      <li>
    ...

相反，您可以制作nav-link is-a li（而不是has-a），并解决此问题。

1. makenav-link扩展的定义li

<polymer-element name="nav-link" extends="li" attributes="href" noscript>

1. 制作时使用类型扩展语法nav-link

<li is="nav-link" href="#a">A</li>

这里全部放在一起： http: //jsbin.com/vecil/2/edit