javascript - 如何将 Shadow DOM delegatesFocus 选项与 Polymer 一起使用？

Question

Shadow DOM 的 Google 开发者入门指南 here解释了当单击不可聚焦区域时如何使用 delegatesFocus 来聚焦 Shadow 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>

Answer 1

更新 - 更简洁的方法

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

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

<小时/>

承蒙 friend 的帮助，在 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>