如何在Dart中從外部查詢影子DOM中的元素？

如何選擇陰影DOM中的節點？考慮下面的例子：如何在Dart中從外部查詢影子DOM中的元素？

「無陰影」 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>  <h2>app-element > ui-button > h2</h2> </template> </polymer-element> <polymer-element name="app-element" noscript> <template>    <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並基於它在文章中提到的事實，JS中的查詢如：document.querySelector('app-element::shadow h2');應該按預期工作。但是在Dart中它不起作用。

我該怎麼做？

來源

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>

更新

如果你要搜索

當前元素

shadowRoot.querySelect('h2');

元素的影子DOM裏面的影子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 /'這樣的僞選擇器會影響元素。但是，當我使用Dart的'querySelect（All）'函數時沒有任何意義。 ''標籤內只有h2可到達。怎麼了？ –

'main（）{}'中的代碼 –

僞選擇器::shadow和組合子/deep/ Firefox上不起作用。

使用.shadowRoot

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

來源

2016-06-14 12:05:39 Aniruddha

如何在Dart中從外部查詢影子DOM中的元素？

回答

相關問題