Как запросить элементы в тени DOM снаружи в Dart?

Как я могу выбрать узлы в тени DOM? Рассмотрим следующий пример:Как запросить элементы в тени DOM снаружи в Dart?

структуру "неомраченный" 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>

В комментариях типа «OK: querySelect()« Я показываю селектора, которые я пытался запускать из любой скрытой DOM.

Я уже читал следующую статью: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/?redirect_from_locale=ru и исходя из того, что в статье сказано, что запрос: document.querySelector('app-element::shadow h2'); в JS должен работать должным образом. Однако в Дарте это не работает.

Что я не так?

источник

2015-04-14 Timur Fayzrakhmanov

Update2 (с комментариями)

Если вы используете пользовательский магистраль, убедитесь, что полимер правильно инициализирован, прежде чем пытаться взаимодействовать с элементами полимера (см how to implement a main function in polymer apps для более подробной информации).

Я обычно предлагает, чтобы избежать пользовательского основные и создать app-element (или любое другое имя, который вы предпочитаете) и поместить код инициализации в attached (убедитесь, что для вызова super.attached();) или в ready() (не нужен супер вызов).

Оригинал

Кажется, в данном случае это не в тени DOM, но ребенка.

Это должно работать:

querySelector('h2');

Это только в тени DOM, когда она находится в пределах ваших элементов <template>...</template> не тогда, когда вы заключаете его в теге пользовательского элемента.

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

Update

Если вы хотите найти

внутри теневой DOM текущего элемента

shadowRoot.querySelect('h2');

внутри теневой DOM элементавнутри тени DOM

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

из-за пределов текущего элемента

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

источник

2015-04-14 14:15:22

Где ваш '' querySelector ... код? В основном, в классе 'AppElement', где в классе? –

Использование CSS все работает так, как ожидалось: псевдоселектор типа ':: shadow' и combinator'/deep/'влияет на элементы. Однако это не имеет смысла, когда я использую функции 'querySelect (All)' Дарта. Только h2 внутри '' тег доступен. Что не так? –

Код в 'main() {}' –

Псевдо селектор ::shadow и комбинатор /deep/ не работает на Firefox.

Использование .shadowRoot

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

источник

2016-06-14 12:05:39 Aniruddha

Как запросить элементы в тени DOM снаружи в Dart?

ответ

Смежные вопросы