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

Question

使用 Polymer，我学会了很好地理解光 DOM（元素中的任何内容）和局部 DOM（故事的 "hidden" 方面）之间的区别。

<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，我是不是应该根本不用担心这一切，因为没有light/local light/local所以一如既往地使用DOM =37=] 处理?

Answer 1

见https://www.polymer-project.org/1.0/docs/devguide/local-dom#light-dom-children

如果您在 <content id="someId"></content> 中添加一个 id，那么您可以使用

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(...) 找到其他 children 而不是本地DOM children.

你也可以使用

var submitButton = Polymer.dom(this).querySelector('paper-button[type=submit]');

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

Custom elements without shadow DOM: best way to get an element

javascript

dom

web-component

polymer

polymer-1.0