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：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" } )

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

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

更新这两篇文章中有更多解释：here和there。

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

1 个答案: