javascript - Using <slot> in native <select> element - Stack Overflow

admin管理员组

文章数量:1023187

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

Share Improve this question Follow asked Sep 10, 2019 at 22:34 MercMerc 17.2k1818 gold badges8686 silver badges132132 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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.

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

Share Improve this question Follow asked Sep 10, 2019 at 22:34 MercMerc 17.2k1818 gold badges8686 silver badges132132 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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.

本文标签： javascriptUsing ltslotgt in native ltselectgt elementStack Overflow