Thought about this for some time, but eventually never needed it. Mixins with reusing templates (and occasionally using webpack's require in html) had been enough for me.
A similar example in React, using a Higher Order Component, would look somehow like this:
function createSurveyInput(SurveyComponent) {
return (props) => (
<div className="survey-base">
<h4>{props.question}</h4>
<SurveyComponent {...props} />
</div>
)
}
const SurveyInputText = createSurveyInput((props) => (
<input type="text" placeholder={props.placeholder} />
))
A similar example in React, using a Higher Order Component, would look somehow like this: function createSurveyInput(SurveyComponent) { return (props) => ( <div className="survey-base"> <h4>{props.question}</h4> <SurveyComponent {...props} /> </div> ) } const SurveyInputText = createSurveyInput((props) => ( <input type="text" placeholder={props.placeholder} /> ))