Javascript 如何在Polymer中使用shadow DOM delegatesFocus选项？

GoogleDevelopers关于ShadowDOM的入门介绍解释了当单击不可聚焦区域时，如何使用delegatesFocus来聚焦ShadowDOM中的第一个可聚焦元素

可以在附加卷影根并传递选项

delegatesFocus:true

时执行此操作

对于聚合物，我找不到通过该选项的方法。我甚至不能执行类似于this.shadowRoot.delegatesFocus=true的操作，因为它抛出一个异常，表示属性是只读的

下面是示例元素

/*阴影DOM样式在这里*/
：主持人{
边框：2倍实心；
填充：10px；
显示：块；
}
.内容{
字号：1em；
边框：1px实心；
填充：0.2em 0.6em；
}
点击这里！
类。元素{
静态get是（）{
返回“pp输入”；
}
静态获取属性（）{
返回{
价值：{
类型：字符串，
通知：正确，
reflectToAttribute:true，
值：true
}
}
}
输入（e）{
this.value=e.target.value；
}
构造函数（）{
超级（）；
此值为“”；
}
}
customElements.define（PPInput.is，PPInput）；

Update-更干净的方法 如本链接所述，可以创建自己的影子DOM

---

出于朋友的礼貌，在GitHub上发现此问题

显然，

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;
    }
}

这样做可以使元素按预期工作

/*阴影DOM样式在这里*/
：主持人{
边框：2倍实心；
填充：10px；
显示：块；
}
.内容{
字号：1em；
边框：1px实心；
填充：0.2em 0.6em；
}
点击这里！
类。元素{
静态get是（）{
返回“pp输入”；
}
静态获取属性（）{
返回{
价值：{
类型：字符串，
通知：正确，
reflectToAttribute:true，
值：true
}
};
}
输入（e）{
控制台日志（e）；
this.value=e.target.value；
}
_附件（dom）{
如果（！this.shadowRoot）{
这是阿塔奇沙多({
模式：“打开”，
代表团焦点：对
});
this.shadowRoot.appendChild（dom）；
}
返回此.shadowRoot；
}
构造函数（）{
超级（）；
此值为“”；
}
}
customElements.define（PPInput.is，PPInput）；