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

这样可行，但我想知道这是否是最佳方式。

或者......因为没有影子DOM，我不应该担心所有这些，并且只是一如既往地使用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]');

没有阴影DOM的自定义元素：获取元素的最佳方式

1 个答案: