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

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

本文关键字：元素 最佳 方式 获取 自定义 影子 DOM      更新时间：2023-09-26

使用聚合物，我学会了很好地理解轻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]');
相关文章：