Come interrogare gli elementi all'interno di DOM shadow dall'esterno in Dart?

Come posso selezionare i nodi all'interno di DOM shadow? Si consideri il seguente esempio:Come interrogare gli elementi all'interno di DOM shadow dall'esterno in Dart?

struttura di "senza ombre" DOM 

<app-element> 
    #shadow-root 
    <h2></h2> 
    <content> 
     #outside shadow 
     <h2></h2> 
    </content> 
    <ui-button> 
     #shadow-root 
     <h2></h2> 
    </ui-button> 
</app-element>

index.html

<body> 
<app-element> 
    <!-- OK: querySelect('app-element').querySelect('h2') --> 
    <!-- OK: querySelect('app-element h2') --> 
    <!-- There is no problem to select it --> 
    <h2>app-element > content > h2</h2> 
</app-element> 
</body>

templates.html

<polymer-element name="ui-button" noscript> 
    <template> 
    <!-- FAIL: querySelect('app-element::shadow ui-button::shadow h2') --> 
    <h2>app-element > ui-button > h2</h2> 
    </template> 
</polymer-element> 

<polymer-element name="app-element" noscript> 
    <template> 
    <!-- FAIL: querySelect('app-element::shadow').querySelect('h2') --> 
    <!-- FAIL: querySelect('app-element::shadow h2') --> 
    <!-- FAIL: querySelect('app-element').shadowRoot.querySelect('h2') --> 
    <h2>app-element > h2</h2> 
    <content></content> 
    <ui-button></ui-button> 
    </template> 
</polymer-element>

In commenti come "OK: querySelect()" mostro selettori che ho provato a eseguire dall'esterno di qualsiasi DOM in ombra.

Ho già letto il seguente articolo: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/?redirect_from_locale=ru e in base al fatto che è stato detto nell'articolo, query come: document.querySelector('app-element::shadow h2'); in JS dovrebbe funzionare come previsto. Tuttavia in Dart non funziona.

Cosa ho sbagliato?

fonte

2015-04-14 Timur Fayzrakhmanov

Update2 (dai commenti)

Se si utilizza un principale personalizzato, in modo che polimero viene inizializzato correttamente prima di provare a interagire con gli elementi polimerico (vedi how to implement a main function in polymer apps per maggiori dettagli).

Io di solito suggerisco di evitare una principale personalizzato e creare un (nome o quello che preferite) app-element e inserire il codice di inizializzazione in attached (Assicuriamo chiamare super.attached();) o in ready() (non ha bisogno della chiamata super).

originale

Sembra che in questo caso non è nel DOM ombra, ma un bambino.

Questo dovrebbe funzionare:

querySelector('h2');

E 'solo nel DOM ombra quando si trova entro gli elementi <template>...</template> non quando si avvolgono nel tag del vostro elemento personalizzato.

<polymer-element name="some-element"> 
    <template> 
    <!-- this becomes the shadow DOM --> 
    <content> 
    <!-- 
     what gets captureD by the content element becomes a child or some-element 
     --> 
    </content> 
    </template> 
</polymer-element>

<body> 
    <some-element> 
    <!-- these elements here are captured by the 
     content tag and become children of some-element --> 
    <div>some text</div> 
    </some-element> 
</body>

Aggiornamento

Se si desidera cercare

all'interno del DOM ombra dell'elemento corrente

shadowRoot.querySelect('h2');

all'interno del DOM ombra di un elementoall'interno dell'ombra DOM

shadowRoot.querySelector('* /deep/ h2'); 
shadowRoot.querySelector('ui-button::shadow h2');

dall'esterno dell'elemento corrente

import 'dart:html' as dom; 
... 
dom.querySelector('* /deep/ h2'); 
// or (only in the shadow DOM of <app-element>) 
dom.querySelector('app-element::shadow h2'); 
dom.querySelector('app-element::shadow ui-button::shadow h2'); 
// or (arbitrary depth) 
dom.querySelector('app-element /deep/ h2');

fonte

2015-04-14 14:15:22

Dove si trova il codice di '' querySelector ...? In main, nella classe 'AppElement', dove nella classe? –

Uso del CSS tutto funziona come previsto: pseudo selettore come ':: shadow' e combinator'/deep/'influenzano gli elementi. Comunque non ha senso quando uso le funzioni 'querySelect (Tutti)' di Dart. Solo h2 all'interno del tag '' è raggiungibile. Cosa c'è che non va? –

Codice nel 'main() {}' –

Pseudo selettore ::shadow e combinatore /deep/ non funziona su firefox.

Usa .shadowRoot

var shadowroot = app-element.shadowRoot; 
shadowroot.querySelector('h2');

fonte

2016-06-14 12:05:39 Aniruddha

Come interrogare gli elementi all'interno di DOM shadow dall'esterno in Dart?

risposta

Problemi correlati