在原生 <select> 元素中使用 <slot>

Question

我正在尝试创建一个 "enhanced" select 元素，方法是使用 Shadow dom 将内容放入其中。这是文件（完整代码在 Glitch:

import { LitElement, html } from 'lit-element'
export class Select extends LitElement {
  render () {
    return html`
      <select id="_native">
        <slot></slot>
      </select>
`
  }
}
customElements.define('nn-select', Select)

然而，似乎没有任何东西被开槽。重命名 select 为 select2 "solves" 问题。

是否有限制，我们不能 <slot> 到原生元素？

Answer 1

是的，有一个限制：<select> 元素仅接受 <option> 个元素作为子元素。因此，您不能使用 <slot>.

与 <tr> 和 <td> 相同的限制...

查看其他。

在原生 <select> 元素中使用 <slot>

Using <slot> in native <select> element

html

javascript

shadow-dom