如何删除包装div或将其类型从div更改为ember-from-for中的span？

Question

I am using bulma.io and for using its style classes for a selectbox it requires the following code.

<div class="field">
  <label class="label">Subject</label>
  <p class="control">
    <span class="select">
      <select>
        <option>Select dropdown</option>
        <option>With options</option>
      </select>
    </span>
  </p>
</div>

which requires a span instead of div for wrapping the (label and select tag).

I've tried to use tagName="span" but the generated code was like that link

here is my code

 <div class="field">
  <p class="control">
    {{f.select-field "countries"
      countries
      optionValuePath="value"
      optionLabelPath="text"
      labelClasses="label"
      label="Location"
      required=true
      tagName="span"
    }}
  </p>
 </div>

which generated a span wrapping the div .. not converting the div to span <span><div><label><select></div></span>

Answer 1

If you include select into a component, the component is wrapped with span:

component/my-select.js : import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'span',
  classNames: ['select']
});

templates/components/my-select.hbs :

<select>
   <option>Select dropdown</option>
   <option>With options</option>
</select>>

myPage.hbs :

<div class="field">
 <p class="control">
  {{my-select}}
 </p>
</div>

here is the twiddle