Question

我使用的是原生DOM編寫定製<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與s青梅基本的調試：只有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元素可以通過<label>有針對性。

因此，如果您要使用非標準（自主定製）元素，您必須自己管理焦點操作。

相反，你可以選擇定義定製的內置元素將延長<select>元素，如下面的例子： https://jsfiddle.net/h56692ee/4/

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

你需要使用is屬性符號對於HTML：

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

更新在這2個職位的更多解釋：here和there。