Slot inside of select element

Framework Knowledge
#1

I’m working on creating syncfusion Ej2 control wrappers and I ran into a case where it makes sense to use content projection to populate a drop down. Is there a limitation where a slot cannot exist inside of a

This is my end goal

<template>
  <ej2-drop-down-list>
    <option value="Game1">American Football</option>
    <option value="Game2">Badminton</option>
    <option value="Game3">Basketball</option>
    <option value="Game4">Cricket</option>
    <option value="Game5">Football</option>
    <option value="Game6">Golf</option>
    <option value="Game7">Hockey</option>
    <option value="Game8">Rugby</option>
    <option value="Game9">Snooker</option>
    <option value="Game10">Tennis</option>
  </ej2-drop-down-list>
</template>
1 Like
#2

Anything except option would be invalid inside a select. Consider putting a custom attribute on a standard select or create it dynamically based on a set of your custom elements.

1 Like
#3

I’m trying to stay close to how syncfusion lets you define the drop down list. Since defining it using an actual select is one of 3 ways (one which I don’t use anyways), either of those choices you gave wouldn’t be bad. The other initialization is done using a UL. My slot implementation could just take the entire select or UL instead of what I was trying to achieve here. Thanks!

1 Like
#4

Problem solved in minutes. Thanks. I can now just do this for the 3 ways

<template>
  <ej2-drop-down-list e-model.bind="model"></ej2-drop-down-list>

  <ej2-drop-down-list>
    <select>
      <option value="Game1">American Football</option>
      <option value="Game2">Badminton</option>
      <option value="Game3">Basketball</option>
      <option value="Game4">Cricket</option>
      <option value="Game5">Football</option>
      <option value="Game6">Golf</option>
      <option value="Game7">Hockey</option>
      <option value="Game8">Rugby</option>
      <option value="Game9">Snooker</option>
      <option value="Game10">Tennis</option>
    </select>
  </ej2-drop-down-list>

  <ej2-drop-down-list>
    <ul>
      <li>Cabbage</li>
      <li>Spinach</li>
      <li>Wheat grass</li>
    </ul>
  </ej2-drop-down-list>
</template>
2 Likes