javascript - 没有阴影 DOM 的自定义元素 : best way to get an element

Question

使用 Polymer，我学会了很好地理解轻型 DOM(元素中的任何内容)和本地 DOM(故事的“隐藏”面)之间的区别。

<iron-form> (像 <form is="iron-form"></form> 一样使用)有点不同，因为它没有本地 DOM。

现在我有一个定制的小部件 ( which is actually available in 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]');

这行得通，但我想知道这是否是最好的方法。

或者...因为没有 shadow DOM，我是否应该根本不用担心所有这些，并且因为没有 light/local DOM 需要处理而一如既往地使用 DOM？

Answer 1

参见 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]');