如何查詢聚合物飛鏢中的shadowRoot內容元素

如何查詢shadowRoot內容元素。我創建了一個自定義表單元素，這個表單有一個在shadowRoot，FormInput和自定義元素之外提供的子項。我需要從shadowRoot中獲取所有的孩子。如果我使用shadowRoot.query或shadowRoot.queryAll，從組件外部具有相同的效果，我無法查看子項，並被shadowRoot模糊處理。我嘗試使用shadowRoot.query（「content」）。getDistributedNodes（）;但是這個節點列表中的文本元素究竟是什麼，我的孩子只有一個。如何查詢聚合物飛鏢中的shadowRoot內容元素

@CustomTag("v-form") 
class Form extends VaderComponent { 
    bool isValid(){ 
    bool valid = true; 
    var nodes = shadowRoot.query("content").getDistributedNodes(); 
    nodes.forEach((element) { 
     window.console.debug(element); 
     element.queryAll("v-input").forEach((elementTarget){ 
     if(elementTarget is FormItem){ 
      window.console.info("É um item de formulário"); 
      if(elementTarget.xtag.isValid() == false){ 
      valid = false; 
      } 
     } 

     }); 

    }); 
    return valid; 
    } 
} 

<polymer-element name="v-form"> 
    <template> 
     <form> 
      <content></content> 
     </form> 
    </template> 
    <script type="application/dart" src="Form.dart"></script> 
</polymer-element> 


<v-form id="form"> 
      <fieldset> 
       <legend>Fieldset</legend> 
       <div class="row"> 
        <div class="large12 columns"> 

         <v-input title="Password Example" type="password" placeholder="large-12.columns" /> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="large-12 columns"> 
         <v-input title="Mask Input" mask="999" type="tel" value="Valor" placeholder="large-12.columns"></v-input> 
        </div> 
       </div> 

       <div class="row"> 
        <div clas="large-4 columns"> 

         <v-input title="Input Label" type="date" placeholder="large-4.columns"></v-input> 
        </div> 
        <div class="large-4 columns"> 

         <v-input title="Input Label" type="text" allowEpty="false" placeholder="Not Allow Empty Value"></v-input> 
        </div> 
        <div class="large-4 columns"> 
         <div class="row collapse"> 

          <div class="small-9 columns"> 
           <v-input title="Input Label" type="text" placeholder="small-9.columns"></v-input> 
          </div> 
          <div class="small-3 columns"> 
           <span class="postfix">.com</span> 
          </div> 
         </div> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="large-12 columns"> 
         <label>Textarea Label</label> 
         <textarea placeholder="small-12.columns"></textarea> 
        </div> 
       </div> 

      </fieldset> 
     </v-form>

錯誤隨叫隨到的IsValid：

#text 
undefined:1 
Uncaught Error: Class 'Text' has no instance method 'queryAll'. 

NoSuchMethodError : method not found: 'queryAll' 
Receiver: Instance of 'Text' 
Arguments: ["v-input"]

如果我只是輸出console.debug項目我得到如下：

#text 
<fieldset>…</fieldset> 
#text

有沒有更好的方法？這個代碼很難看（兩個for each（n^2））

來源

2013-10-18 Giovanni Silva

你從哪裏調用'的isValid（）'？在你的''被註冊並運行之前，你可能會調用它。訪問'shadowRoot.querySelector（「content」）。getDistributedNodes（）'是在'enteredView（）'被調用後的安全時刻。嘗試覆蓋已輸入的視圖，如下所示：'enteredView（）{super.enteredView（）;已驗證（）;看看結果是否不同。 –

[自定義元素的中的查詢元素]的可能重複（http://stackoverflow.com/questions/22071232/query-elements-inside-content-of-a-custom-element） –

shadowRoot與之不同。可以被正常查詢，因爲它是lightdom的一部分。主要的代碼變成：

var nodes = this.queryAll("v-input"); 
nodes.forEach((element){ 
if(elementTarget is FormItem){ 
     window.console.info("É um item de formulário"); 
     if(elementTarget.xtag.isValid() == false){ 
     valid = false; 
     } 
} 
}); 
return valid;

此代碼按預期工作

來源

2013-10-18 21:55:14

如何查詢聚合物飛鏢中的shadowRoot內容元素

回答

相關問題