【问题标题】：How to use the shadow DOM delegatesFocus option with Polymer?如何在 Polymer 中使用 shadow DOM delegatesFocus 选项？
【发布时间】：2017-06-29 04:44:43
【问题描述】：

Shadow DOM here 的 Google Developers 入门介绍了当单击不可聚焦区域时如何使用 delegatesFocus 聚焦阴影 DOM 内的第一个可聚焦元素。

可以在附加影子根并传递选项delegatesFocus: true时完成。

使用 Polymer，我找不到通过该选项的方法。我什至不能做像this.shadowRoot.delegatesFocus = true 这样的事情，因为它会抛出异常，说该属性是只读的。

这是示例元素。

<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer-element.html">
<dom-module id="pp-input">
  <template>

    <style>
      /* shadow DOM styles go here */
      :host {
        border: 2px solid;
        padding: 10px;
        display: block;
      }
      .content {
        font-size: 1em;
        border: 1px solid;
        padding: 0.2em 0.6em;
      }
    </style>
    <h2>Click Here!</h2>
    <!-- shadow DOM goes here -->
    <input type="text" on-input="onInput" value="[[value]]" />
  </template>

  <script>
    class PPInput extends Polymer.Element {
      static get is() {
        return "pp-input";
      }
      static get properties() {
        return {
          value: {
            type: String,
            notify: true,
            reflectToAttribute: true,
            value: true
          }
        }
      }
      onInput(e) {
        this.value = e.target.value;
      }
      constructor() {
        super();
        this.value = "";
      }

    }
    customElements.define(PPInput.is, PPInput);
  </script>
</dom-module>

<pp-input value="asdf"></pp-input>

【问题讨论】：

标签： javascript polymer focus web-component shadow-dom

【解决方案1】：

更新 - 更简洁的方法

如本链接所述，可以创建自己的影子 DOM

https://www.polymer-project.org/2.0/docs/devguide/dom-template#create-your-own-shadow-root

感谢朋友，在 GitHub 上发现了这个问题。

https://github.com/Polymer/polymer/issues/3988

显然 attachShadow() 选项不会通过 Polymer 公开，但可以执行以下操作来覆盖 Polymer 创建影子 DOM 的方式。

class PPInput extends Polymer.Element {

    // code...

    _attachDom(dom) {
        if (!this.shadowRoot) {
            this.attachShadow({
                mode: 'open',
                delegatesFocus: true
            });
            this.shadowRoot.appendChild(dom);
        }
        return this.shadowRoot;
    }
}

这样做会使元素按预期工作。

<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer-element.html">
<dom-module id="pp-input">
  <template>

    <style>
      /* shadow DOM styles go here */
      :host {
        border: 2px solid;
        padding: 10px;
        display: block;
      }
      .content {
        font-size: 1em;
        border: 1px solid;
        padding: 0.2em 0.6em;
      }
    </style>
    <h2>Click Here!</h2>
    <!-- shadow DOM goes here -->
    <input type="text" on-input="onInput" value="[[value]]" />
  </template>

  <script>
    class PPInput extends Polymer.Element {
      static get is() {
        return "pp-input";
      }
      static get properties() {
        return {
          value: {
            type: String,
            notify: true,
            reflectToAttribute: true,
            value: true
          }
        };
      }

      onInput(e) {
        console.log(e);
        this.value = e.target.value;
      }
      _attachDom(dom) {
        if (!this.shadowRoot) {
          this.attachShadow({
            mode: "open",
            delegatesFocus: true
          });
          this.shadowRoot.appendChild(dom);
        }
        return this.shadowRoot;
      }
      constructor() {
        super();
        this.value = "";
      }
    }
    customElements.define(PPInput.is, PPInput);
  </script>
</dom-module>

<pp-input></pp-input>

【讨论】：