如何让 Shadow Dom 与列表一起工作？答案

【问题标题】：How to Get Shadow Dom to Work With A LIst?如何让 Shadow Dom 与列表一起工作？
【发布时间】：2014-05-13 01:04:06
【问题描述】：

我正在使用 Polymer 来玩弄影子 dom。我觉得应该是一个简单的用例，但我无法完全开始工作。我想定义一个可以包含导航链接的“导航”容器。我希望它看起来像下面这样：

<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 创建一个包含 a 的 li。问题是li 似乎不是ul 的孩子。我在这里错过了什么？

【问题讨论】：

nav 不是有效的自定义元素名称。名称中必须有破折号（例如x-nav、my-nav 等）。
@ebdel 很好。改为top-nav。

标签： javascript html polymer shadow-dom

【解决方案1】：

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

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

相反，您可以使您的nav-link is-a 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

【讨论】：

这似乎解决了这个问题，谢谢！知道为什么 shadow-dom 锚的文本不可点击吗？

【解决方案2】：

如果我没看错的话，我认为核心问题是 Bootstrap 的 CSS 是这样写的：

.nav-tabs > li

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

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

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

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

【讨论】：