How to Get Shadow Dom to Work With A LIst?

Question

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?

Answer 1

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.

1. make Definition of nav-link extend li

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

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

Answer 2

If I'm reading the question correctly, I think the core issue is that Bootstrap's CSS is written like this:

.nav-tabs > li

And you're trying to recreate that, but given your current structure the shadow boundaries prevent it. If you stick with your current setup then you'll need to rewrite those bootstrap selectors so they look like this:

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

But that is probably not what you want :) If you went down that route then you'd end up rewriting Bootstrap. That highlights a very important point: Bootstrap was written before tools like Shadow DOM existed so it doesn't always port easily.

Until we have the next generation of UI frameworks written with Shadow DOM in mind I think there will occasionally be situations like this where it may be easier to just create your own elements that borrow the Bootstrap styles. Trying to cobble together Shadow DOM that exactly matches their selectors is probably more effort than its worth.