Jak wyszukiwać elementy w cieniu DOM z zewnątrz w Dart?

Jak mogę wybrać węzły w cieniu DOM? Rozważmy następujący przykład:Jak wyszukiwać elementy w cieniu DOM z zewnątrz w Dart?

strukturę "unshadowed" 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>

W komentarzach typu "OK: querySelect()" pokazuję selektory, które próbowałem uruchomić spoza dowolnego zacienionego DOM.

Przeczytałem już następujący artykuł: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/?redirect_from_locale=ru i na podstawie faktu, że zostało to powiedziane w artykule, zapytanie takie jak: document.querySelector('app-element::shadow h2'); w JS powinno działać zgodnie z oczekiwaniami. Jednak w Dart nie działa.

Co mam nie tak?

Źródło

2015-04-14 Timur Fayzrakhmanov

Update2 (z komentarzami)

Jeśli używasz niestandardowego main upewnić się, że polimer jest prawidłowo zainicjowany przed próbą interakcji z elementów polimerowych (patrz how to implement a main function in polymer apps więcej szczegółów).

zazwyczaj sugerują, aby uniknąć zwyczaj główną i utworzyć app-element (lub dowolną nazwą wolisz) i umieścić swój kod inicjalizacji do attached (zapewnienie zadzwonić super.attached();) lub w ready() (nie potrzebuje super połączenia).

Original

Wydaje się w tym przypadku nie jest w DOM cienia, ale dziecko.

To powinno działać:

querySelector('h2');

To tylko w DOM cienia kiedy jest w twoich elementów <template>...</template> nie kiedy owinąć go w tagu niestandardowego elementu.

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

Aktualizacja

Jeśli chcesz szukać

wewnątrz DOM cienia bieżącego elementu

shadowRoot.querySelect('h2');

wewnątrz DOM cienia elementu wewnątrz cienia DOM

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

spoza bieżącego elementu

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');

Źródło

2015-04-14 14:15:22

Gdzie jest twój ... '' querySelector kod? W zasadzie w klasie "AppElement", gdzie w klasie? –

Używanie CSS wszystko działa zgodnie z oczekiwaniami: pseudo selektor taki jak ':: shadow' i kombinator'/deep/'wpływa na elementy. Jednak nie ma sensu, gdy używam funkcji 'querySelect (All) Dart'a. Tylko h2 wewnątrz '' jest osiągalny. Co jest nie tak? –

Kod w 'main() {}' –

pseudo selektor ::shadow i syntezatora /deep/ nie działa na firefox.

Zastosowanie .shadowRoot

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

Źródło

2016-06-14 12:05:39 Aniruddha

Jak wyszukiwać elementy w cieniu DOM z zewnątrz w Dart?

Odpowiedz

Powiązane problemy