Как запросить элементы содержимого 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))
isValid()
? Возможно, вы вызываете его до того, как ваш<v-form>
зарегистрируется и запустится. Безопасный момент для доступа кshadowRoot.querySelector("content").getDistributedNodes()
— после вызоваenteredView()
. Попробуйте переопределить EnterView следующим образом:enteredView() { super.enteredView(); isValid(); }
и посмотрите, отличается ли результат. - person Sergey Shevchenko   schedule 16.12.2013