Ein Klick Etikett nicht Fokussierung individuelles Elements (webcomponent)

Question

Ich schreibe ein benutzerdefiniertes <select> Element mit nativen DOM (kein Polymer)

Ich versuche, mein Element mit einem <label> Elemente zu verwenden und lösen korrekt Ereignisse klicken, um meinen Element, wenn das Etikett angeklickt wird, das heißt:

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

Allerdings tritt dieses Verhalten nicht aus dem Kasten heraus zu arbeiten, auch wenn ich einen tabindex fügen sie es machen fokussierbarem

Hier ist eine abgespeckte Version des Code und ein Spiel mit s ome grundlegende Debugging: 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

Nur die phrasing content Elemente können durch <label> gezielt werden.

Sie müssen also die Fokusaktion selbst verwalten, wenn Sie ein nicht standardmäßiges (autonomes benutzerdefiniertes) Element verwenden möchten.

Stattdessen können Sie wählen, eine definieren Customized Einbauelement, die das <select> Element erweitern wird, wie im folgenden Beispiel: https://jsfiddle.net/h56692ee/4/

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

Sie finden das is Attribut-Notation verwenden müssen für HTML:

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

aktualisieren Weitere Erklärungen in dieser 2-Beiträge: here und there.