单击标签不聚焦自定义元素（webcomponent）

Question

我正在使用原生 DOM（无 Polymer）编写自定义 <select> 元素

我正在尝试将我的元素与 <label> 元素一起使用，并在点击标签时正确触发我的元素的点击事件，即：

<label>
  My Select:
  <my-select placeholder="Please select one">...</my-select>
</label>

// or

<label for='mySelect1'>My Select:</label>
<my-select id='mySelect1' placeholder="Please select one">...</my-select>

然而，即使我添加了一个 tabindex 使其可聚焦，这种行为也不是开箱即用的

这是代码的精简版本和带有一些基本调试功能的 jsfiddle：https://jsfiddle.net/h56692ee/2/

var MySelectOptionProto = Object.create(HTMLElement.prototype);
document.registerElement('my-select-option', { prototype: MySelectOptionProto});

var MySelectProto = Object.create(HTMLElement.prototype);
MySelectProto.createdCallback = function() {
    if (!this.getAttribute('tabindex')) {
        this.setAttribute('tabindex', 0);
    }
    this.placeholder = document.createElement('span');
    this.placeholder.className = 'my-select-placeholder';
    this.appendChild(this.placeholder);

    var selected = this.querySelector('my-select-option[selected]');
    this.placeholder.textContent = selected ? 
        selected.textContent : (this.getAttribute('placeholder') || '');
};
document.registerElement('my-select', { prototype: MySelectProto});

Answer 1

只有phrasing content elements can be targeted by <label>.

因此，如果您想使用非标准（自主自定义）元素，则必须自己管理焦点操作。

您可以选择定义一个 自定义内置元素 来扩展 <select> 元素，如下例所示： https://jsfiddle.net/h56692ee/4/

 var MySelectProto = Object.create( HTMLSelectElement.prototype )
 //...
 document.registerElement('my-select', { prototype: MySelectProto, extends: "select" } )

您需要对 HTML 使用 is 属性表示法：

<label>
   My Select:
   <select is="my-select" placeholder="Please select one">
       <option>...</option>
   </select>
</label>

更新在这 2 个帖子中有更多解释： and .

单击标签不聚焦自定义元素（webcomponent）

Clicking label not focusing custom element (webcomponent)

javascript

html

web-component

custom-element