How to Get Shadow Dom to Work With A LIst?

html, javascript, polymer, shadow-dom

Solution

The `li` elements are owned by `nav-link`. There is no way to make `nav-link` disappear in this setup, so your tree looks like:

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

Instead you can make your `nav-link` is-a `li` (instead of has-a), and resolve this problem.

- make Definition of `nav-link` extend `li`

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

- use type-extension syntax when making `nav-link`

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

Here it is all put together: http://jsbin.com/vecil/2/edit

Problem

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?

Original source