Как запрашивать элементы содержимого shadowRoot в Polymer dart

Как запросить элементы содержимого shadowRoot. Я создаю пользовательский элемент формы, у этой формы есть дочерние элементы вне shadowRoot, FormInput, а также пользовательские элементы. Мне нужно получить всех детей от shadowRoot. Если я использую shadowRoot.query или shadowRoot.queryAll, имеет тот же эффект снаружи компонента, я не могу просматривать дочерние элементы, затемняется shadowRoot. Я пытаюсь использовать shadowRoot.query("content").getDistributedNodes(); но какого хрена этот текстовый элемент в списке узлов, у моих детей всего один.

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

Ошибка при вызове Valid:

#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

Есть ли лучший метод? этот код уродлив (два forEach (n^2))


person Giovanni Silva    schedule 18.10.2013    source источник
comment
Откуда вы звоните isValid()? Возможно, вы вызываете его до того, как ваш <v-form> зарегистрируется и запустится. Безопасный момент для доступа к shadowRoot.querySelector("content").getDistributedNodes() — после вызова enteredView(). Попробуйте переопределить EnterView следующим образом: enteredView() { super.enteredView(); isValid(); } и посмотрите, отличается ли результат.   -  person Sergey Shevchenko    schedule 16.12.2013
comment
возможный дубликат элементов запроса внутри ‹content› пользовательского элемента   -  person Günter Zöchbauer    schedule 17.03.2014


Ответы (1)


shadowRoot и the разные. Может быть запрошен как обычно, потому что является частью 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;

Этот код работает так, как ожидалось

person Giovanni Silva    schedule 18.10.2013