如何让 Shadow Dom 与 LIst 一起工作

Question

我正在使用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的孩子。我在这里错过了什么？

Answer 1

li 元素归nav-link所有。在此设置中无法使nav-link消失，因此您的树如下所示：

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

相反，你可以让你的nav-link是li（而不是has-a），并解决这个问题。

1. 使定义nav-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

Answer 2

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

.nav-tabs > li

你

试图重建它，但考虑到你当前的结构，阴影边界阻止了它。如果您坚持当前的设置，则需要重写这些引导选择器，使它们看起来像这样：

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

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

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