[英]How to Query shadowRoot content elements in Polymer dart
How to query shadowRoot Content Elements. 如何查询shadowRoot内容元素。 I create a custom form element, this form have children provided outside the shadowRoot, FormInput, also custom elements. 我创建了一个自定义表单元素,此表单在shadowRoot,FormInput和自定义元素之外还提供了子级。 I need to get all children from the shadowRoot. 我需要从shadowRoot中获取所有孩子。 If I use shadowRoot.query or shadowRoot.queryAll, has the same effect from outside the component, I can't view the children, is obfuscated by shadowRoot. 如果我使用shadowRoot.query或shadowRoot.queryAll,它在组件外部具有相同的效果,则我无法查看子级,因为shadowRoot对其进行了混淆。 I'm trying to use shadowRoot.query("content").getDistributedNodes(); 我正在尝试使用shadowRoot.query(“ content”)。getDistributedNodes(); but what hell is this text element in the node list, my children is only one. 但是节点列表中的这个文本元素到底是什么,我的孩子们只有一个。
@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>
The error on call isValid: 呼叫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"]
If I just output the item in console.debug I get the follow: 如果仅在console.debug中输出项目,则会得到以下结果:
#text
<fieldset>…</fieldset>
#text
Is there a better method? 有没有更好的方法? this code is ugly (two forEach (n^2)) 这段代码很难看(两个forEach(n ^ 2))
shadowRoot and the are different. shadowRoot和的不同。 Can be queried as normal because is part of lightdom. 可以正常查询,因为它是光线的一部分。 The principal code become: 主体代码变为:
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;
This code works as expected 该代码按预期工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.