Question

我正在使用Polymer来玩影子dom。我觉得应该是一个简单的用例，我可以很好地工作。我想定义一个＆＃34; nav＆＃34;可以包含导航链接的容器。我希望它看起来如下：

<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创建ul，nav-link创建包含li的{{1}}。问题是a似乎不是li的孩子。我在这里缺少什么？

Answer 1

li元素归nav-link所有。在此设置中无法使nav-link消失，因此您的树看起来像：

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

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

定义nav-link扩展li

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

在制作nav-link

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

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

Answer 2

如果我正确地阅读了这个问题，我认为核心问题是Bootstrap的CSS是这样编写的：

.nav-tabs > li

而你正试图重新创建它，但鉴于你目前的结构，阴影边界阻止了它。如果你坚持使用当前的设置，那么你需要重写那些引导选择器，使它们看起来像这样：

.nav-tabs ::content nav-link::shadow li

但这可能不是你想要的:)如果你走了那条路，那么你最终会重写Bootstrap。这突出了一个非常重要的观点：Bootstrap是在Shadow DOM之类的工具出现之前编写的，所以它并不总是容易移植。

在我们考虑使用Shadow DOM编写下一代UI框架之前，我认为偶尔会出现这样的情况：创建自己的借用Bootstrap样式的元素可能更容易。试图拼凑完全匹配其选择器的Shadow DOM可能比它的价值更多的努力。

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

2 个答案: