Eu tenho algumas diretivas personalizadas que são basicamente projetadas para<input>. E eu tenho um componente personalizado<app-decorated-input>

Há uma tonelada<app-decorated-input>s junto com simples<input>s no meu aplicativo para alguns dos quais eu gosto de usar as diretivas e para outros não. Como passo as diretivas para o subjacente<input> quando a diretiva é usada assim:

<app-decorated-input directive1 directive2 ></app-decorated-input>

e têm o mesmo efeito das diretivas sobre os subjacentes<input> como se fosse usado diretamente nele:

 <input type="text" directive1 directive2 >

ATUALIZAR:

O que há por dentro<app-decorated-input> não é muito relevante, exceto pelo fato de conter um<input> como eu já mencionei. Seu modelo é semelhante a:

<div> Some decorations here </div>
<div> 
  <input type="text" {...directives}> <!-- In ReactJS this is done by using {...this.props} -->
</div>
<div> Some decorations here too! </div>

Tudo o que quero fazer é transferir todas as diretivas especificadas no<app-decorated-input> para o subjacente<input>.