Event listeners on child components does not work

[ddd]

Hi @cferdinandi
Let's take the example from this link https://codepen.io/cferdinandi/pen/QWqvVqL
The oninput does not work as expected.

const components = [new Reef('#app', {
	data: {
		text: ''
	},
	template: function (props) {
		return `
			<label for="mirror">Whatever you type shows up below the field</label>
			<input type="text" oninput="mirror1()">
			<div><em aria-live="polite">${props.text.length ? props.text : 'Type something above to change this text'}</em></div>`;
	},
	listeners: {
		mirror1: function (event) {
			this.data.text = event.target.value;
		}
	}
}), new Reef('#app', {
	data: {
		text: ''
	},
	template: function (props) {
		return `
			<label for="mirror">Whatever you type shows up below the field</label>
			<input type="text" oninput="mirror2()">
			<div><em aria-live="polite">${props.text.length ? props.text : 'Type something above to change this text'}</em></div>`;
	},
	listeners: {
		mirror2: function (event) {
			this.data.text = event.target.value;
		}
	}
})];

new Reef('#app', {
	template: function (props) {
		return `${components.map(c => c.html()).join('')}`;
	}
}).render();

[Chris Ferdinandi]

Ah yea, I see what's happening here. The child components return the HTML only, so any reference to those listeners is lost. They would need to be attached to the parent component to work.

[Chris Ferdinandi]

Addressed with a redesigned API model in v12 (now live)