我正在<select>使用本机DOM（无Polymer）编写自定义元素
我正在尝试将我的元素与一个<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});
因此，如果要使用非标准（自主定制）元素，则必须自己管理焦点动作。
相反，您可以选择定义将扩展该元素的Customized内置<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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句