通过使用Polymer，我学会了很好地理解轻型DOM（无论元素中的内容）与本地DOM（故事的“隐藏”面）之间的区别。
<iron-form>（用法类似<form is="iron-form"></form>）有点不同，因为它没有本地DOM。
现在，我有一个定制的小部件（在GitHub中实际可用），您可以在其中进行以下操作：
<hot-form-validator success-message="Record saved!">
<form is="iron-form" id="form" method="post" action="/stores/polymer">
<paper-input required id="name" name="name" label="Your name"></paper-input>
<paper-input required id="surname" name="surname" label="Your surname"></paper-input>
<paper-button type="submit" raised on-click="_submit">Click!</paper-button>
</form>
</hot-form-validator>
现在，hot-form-validator需要获取表单，然后在表单中查找特定按钮（带有type=submit）。所以，我有：（记住那this.form是表格）：
attached: function(){
var paperButton = this.form.$$('paper-button[type=submit]');
...
}
它可以工作，但是这样做没有意义，因为它$$仅适用于本地DOM，而纸质按钮实际上位于表单的轻型DOM中。
attached: function(){
var paperButton = this.form.queryEffectiveChildren('paper-button[type=submit]');
这行得通，但我想知道这是否是最好的方法。
或...由于没有影子DOM，我是否应该为此而烦恼，而又因为没有灯光/本地DOM来处理，所以像往常一样简单地使用DOM？
参见https://www.polymer-project.org/1.0/docs/devguide/local-dom#light-dom-children
如果您将添加id到，<content id="someId"></content>则可以使用
var result = this.getContentChildren('#someId');
然后在结果中查找所需的元素。
例如，您可以为<content>“提交”按钮创建特定的标签，例如
<dom-module ...>
<template>
...
<content></content>
<content id="submitButton" select="paper-button[type=submit]"></content>
...
</template>
</dom-module>
然后使用
var submitButton = this.getContentChildren('#submitButton')[0];
该代码有效
this.form.$$('paper-button[type=submit]');
因为this.$$转发到querySelectorAll(...)幕后的DOM封装只是在模拟，并且不会阻止querySelectorAll(...)找到本地DOM子代以外的其他子代。
您也可以使用
var submitButton = Polymer.dom(this).querySelector('paper-button[type=submit]');
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句