2014-04-02 7 views
5

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:Come ottenere Shadow Dom per funzionare con un vantaggio?

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

+1

'nav' non è un nome di elemento personalizzato valido. Ci deve essere un trattino nel nome (ad es.'x-nav',' my-nav', ecc.). – ebidel

+0

@ebidel Buona cattura. Modificato su 'top-nav'. –

risposta

4

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

+0

Questo sembra risolvere il problema, grazie! Qualche idea sul perché il testo dell'ancora shadow-dom non sia cliccabile? –

1

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.