5

I am using Polymer to play around with the shadow dom. I have what I feel like should be a simple use case that I can't quite get working. I want define a "nav" container that can contain nav links. I'd like it to look like the following:

<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>

The following are the definitions that I created for the two elements (using Bootstrap theme-ing for style):

<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>

Inspecting the Shadow Dom, both element seem to work independently - the top-nav creates a ul and the nav-link creates a li containing an a. The problem is that the li's to not seem to be children of the ul. What am I missing here?

4

2 回答 2

4

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

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

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

于 2014-04-06T18:28:25.643 回答
1

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

.nav-tabs > li

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

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

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

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

于 2014-04-06T05:18:45.323 回答