Javascript 如何使阴影Dom与列表一起工作？

我正在使用聚合物来玩弄阴影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>

A.
B
C
D

以下是我为这两个元素创建的定义（使用样式引导主题）：

---

检查阴影Dom时，两个元素似乎都独立工作-顶部导航创建一个

ul

，导航链接创建一个包含

a

的

li

。问题是

li

似乎不是

ul

的后代。我在这里遗漏了什么？

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

.nav-tabs > li

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

你正试图重建它，但鉴于你目前的结构，阴影边界阻止了它。如果您坚持使用当前设置，则需要重写这些引导选择器，使其如下所示：

.nav-tabs > li

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

但这可能不是你想要的：）如果你沿着这条路走下去，那么你最终会重写引导。这突出了一个非常重要的问题：Bootstrap是在shadowdom等工具出现之前编写的，所以它并不总是容易移植

---

在下一代UI框架使用Shadow DOM编写之前，我认为偶尔会出现这样的情况，在这种情况下，只需创建借用引导样式的自己的元素可能会更容易。试图拼凑出与其选择器完全匹配的阴影DOM可能需要付出更多的努力。

这些

li

元素归

nav link

所有。在此设置中，无法使

nav link

消失，因此您的树看起来像：

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

...

相反，您可以使您的

导航链接
为-a
li
（而不是为-a），并解决此问题

定义
nav链路
extend
li

创建导航链接时使用类型扩展语法
a

在这里，所有这些都放在一起：
nav
不是有效的自定义元素名称。名称中需要有一个破折号（例如，
x-nav
，
my-nav
，等等）。@ebidel捕捉良好。已更改为
top nav
。这似乎可以解决此问题，谢谢！你知道为什么阴影dom锚的文本不可点击吗？