I am trying to create an "enhanced" select element by slotting contents using Shadow dom into it. This is the file (the full code is in in 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)

However, nothing seems to get slotted. Renaming select into select2 "solves" the problem.

Is there a limitation so that we cannot <slot> into native elements?

I am trying to create an "enhanced" select element by slotting contents using Shadow dom into it. This is the file (the full code is in in 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)

However, nothing seems to get slotted. Renaming select into select2 "solves" the problem.

Is there a limitation so that we cannot <slot> into native elements?

• javascript
• html
• shadow-dom

1 Answer 1

Yes, there a limitation: a <select> element accepts only <option> elements as children. As a consequence, you cannot use <slot>.

Same limitation with <tr> and <td>...

See this other SO post on the same subject.