How to combine Layout for Ember Components with input Elements - ember.js

Question

I ran into this issue by updating from EmberJS 1.7 to 1.8:
https://github.com/emberjs/ember.js/issues/9461#issuecomment-61369680
[Update: the example jsbins can be found in the link above. I've to earn enough reputation to be allowed to post more than two links. I am sorry for the inconvenience!]
In EmberJS it seems not to be possible to combine a component with tagName 'input' and a layout.
Now I have an input element and a graphical representation sitting next to each other like:
<svg ...>
<input type="radio"...>
The image content is driven by a CSS rule which depends on the radio button state (yes, I want to style my own radio button).
My (propably very naive) components-template to achieve the rendered output:
<script type="text/x-handlebars" id="components/radio-button">
<svg><circle cx="50%" cy="50%" r="8" /></svg>
{{yield}}
</script>
[Update: Added component code]
And the component code:
App.ApplicationRoute = Ember.Route.extend({
model: function() {
return {'radio': 0};
},
});
App.RadioButtonComponent = Ember.Component.extend({
tagName: 'input',
attributeBindings: [
'type',
'checked',
'disabled',
'tabindex',
'name',
'autofocus',
'required',
'form',
'value'
],
type: 'radio',
checked: false,
disabled: false,
indeterminate: false,
init: function() {
this._super();
this.on('change', this, this._updateElementValue);
var name = this.get('name'),
controller = this.get('radioController'),
checked = controller.get('model.%#'.fmt(name)) === this.get('value');
this.set('checked', checked);
},
group: "radio_button",
classNames: ['radio-button'],
_updateElementValue: function() {
var name = this.get('name'),
controller = this.get('radioController');
controller.set('model.%#'.fmt(name), this.get('value'));
}
});
But with EmberJS 1.8 my component [Update: added code]
<script type="text/x-handlebars">
{{radio-button name="radio" radioController=this value=0}}
</script>
now gets rendered like:
<input type="radio"...><svg ...></input>
I'am now puzzled by how to keep attribute bindings for input elements and use layouts with components in EmberJS.

Answer 1

Here is an solution for adding a layout to an input element:
http://emberjs.jsbin.com/nihacacebe/1/edit?html,js,output
The trick simply is to use a 'proxy' component:
<script type="text/x-handlebars" id="components/radio-button">
{{radio-button-input name=name radioController=radioController value=value}}
<i>{{name}}</i>
{{yield}}
</script>
This component allows to add some layout to the input element in the hbs and forwards everything to the 'real' component:
App.RadioButtonInputComponent = Ember.Component.extend({
tagName: 'input',
type: 'radio',
/* Add your code here... */
});
The proxy component is then used like a real component:
<script type="text/x-handlebars">
{{radio-button name="radio" radioController=this value=0}}
</script>
This solution was inspired by the work of Yapp Labs Ember-Cli Add On:
https://github.com/yapplabs/ember-radio-button
I still have a hard time to understand why using layout is not permitted for input elements in components.