javascript - 如何在Polymer中使用阴影DOM代理委托(delegate)选项？

关于阴影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>

最佳答案

更新-更清洁的方法

如本链接所述，可以创建自己的影子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>

关于javascript - 如何在Polymer中使用阴影DOM代理委托(delegate)选项？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44816513/