Come ottenere Shadow Dom per funzionare con un vantaggio?

Question

Sto usando Polymer per giocare con la dom ombra. Ho quello che mi sento dovrebbe essere un caso di uso semplice che non riesco proprio a lavorare. Voglio definire un contenitore "nav" che possa contenere collegamenti nav. Mi piacerebbe che simile al seguente:

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

Di seguito sono le definizioni che ho creato per i due elementi (usando Bootstrap tema-zione per lo stile):

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

Ispezione del Ombra Dom, entrambi gli elementi sembrano funzionare in modo indipendente: lo top-nav crea uno ul e lo nav-link crea uno li contenente uno a. Il problema è che gli li non sembrano essere figli dello ul. Cosa mi manca qui?

Answer 1

Gli elementi li appartengono a nav-link. Non v'è alcun modo per rendere nav-link scomparire in questa configurazione, così il vostro albero assomiglia a:

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

Invece si può fare il vostro nav-linkis-ali (invece di ha-un), e risolvere il problema.

1. make Definizione nav-link estendere li

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

1. uso sintassi del tipo estensione momento nav-link

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

Qui è tutto messo insieme: http://jsbin.com/vecil/2/edit

Answer 2

Se sto leggendo correttamente alla domanda, penso che il problema principale è che i CSS di Sputafuoco è scritto così:

.nav-tabs > li 

E si sta cercando di ricreare quello, ma dato il vostro attuale struttura l'ombra i confini lo impediscono. Se si bastone con la configurazione corrente allora avrete bisogno di riscrivere quelle selettori bootstrap in modo da apparire come questo:

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

Ma che probabilmente non è quello che volete :) Se si è andato giù questa strada allora si sarebbe finiscono per riscrivere Bootstrap. Ciò evidenzia un punto molto importante: Bootstrap è stato scritto prima che esistessero strumenti come Shadow DOM, quindi non sempre porta facilmente.

Fino a quando non avremo in mente la prossima generazione di framework UI scritti con Shadow DOM, penso che occasionalmente ci saranno situazioni come questa in cui potrebbe essere più semplice creare i propri elementi che prendono in prestito gli stili Bootstrap. Cercando di accoppiare insieme Shadow DOM che corrisponde esattamente ai loro selettori è probabilmente uno sforzo maggiore del suo valore.