Làm cách nào để truy vấn các phần tử bên trong DOM bóng từ bên ngoài trong Dart?

Làm cách nào để chọn các nút trong DOM bóng? Hãy xem xét ví dụ sau:Làm cách nào để truy vấn các phần tử bên trong DOM bóng từ bên ngoài trong Dart?

cấu trúc của "không bóng tối" 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>

Trong các bình luận như "OK: querySelect()" tôi hiển thị các bộ chọn mà tôi đã cố gắng chạy từ bên ngoài bất kỳ DOM được tô bóng nào.

Tôi đã đọc bài viết sau: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/?redirect_from_locale=ru và dựa trên thực tế là nó đã được nói trong bài viết, truy vấn như: document.querySelector('app-element::shadow h2'); trong JS sẽ hoạt động như mong đợi. Tuy nhiên trong Dart nó không hoạt động.

Tôi làm gì sai?

Nguồn

2015-04-14 Timur Fayzrakhmanov

Update2 (từ bình luận)

Nếu bạn sử dụng một chính tùy chỉnh, đảm bảo rằng Polymer được khởi tạo đúng cách trước khi bạn cố gắng để tương tác với các yếu tố Polymer của bạn (xem how to implement a main function in polymer apps để biết thêm chi tiết).

tôi thường đề nghị để tránh một tùy chỉnh chính và tạo ra một (tên hoặc bất cứ điều gì bạn thích) app-element và đặt mã khởi tạo của bạn vào attached (đảm bảo để gọi super.attached();) hoặc trong ready() (không cần gọi siêu).

gốc

Dường như trong trường hợp này nó không phải trong DOM bóng nhưng một đứa trẻ.

này nên làm việc:

querySelector('h2');

Đó là chỉ trong DOM bóng khi nó nằm trong các yếu tố của bạn <template>...</template> không phải khi bạn quấn nó trong thẻ của nguyên tố tùy chỉnh của bạn.

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

Cập nhật

Nếu bạn muốn tìm kiếm

bên trong DOM bóng của phần tử hiện tại

shadowRoot.querySelect('h2');

bên trong DOM bóng của một nguyên tố bên trong bóng DOM

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

từ bên ngoài các yếu tố hiện

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

Nguồn

2015-04-14 14:15:22

ở đâu 'querySelector ... 'mã của bạn? Trong chính, trong lớp 'AppElement', ở đâu trong lớp? –

Sử dụng CSS mọi thứ hoạt động như mong đợi: bộ chọn giả như ':: shadow' và combinator'/deep/'ảnh hưởng đến các phần tử. Tuy nhiên nó không có ý nghĩa khi tôi sử dụng các hàm 'querySelect (All)' của Dart. Chỉ có thể truy cập h2 bên trong thẻ ''. Chuyện gì vậy? –

Mã trong 'chính() {}' –

Pseudo selector ::shadow và Combinator /deep/ không hoạt động trên firefox.

Sử dụng .shadowRoot

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

Nguồn

2016-06-14 12:05:39 Aniruddha

Làm cách nào để truy vấn các phần tử bên trong DOM bóng từ bên ngoài trong Dart?

Trả lời

Các vấn đề liên quan