如何创建多个略有不同的Stenciljs组件？

我用很多方法和逻辑编写了一个Stenciljs组件“textarea”。此外，我需要一个inputfield，它的功能几乎相同，但有一些细微的差别。我不想维护两个组件，它们具有几乎相同的测试、几乎相同的样式和几乎相同的方法，这将导致大量代码重复

现在，我创建了一个通用组件“idb input”，它的“type”属性可以是“textarea”或“textfield”，并使用if-else语句来决定该类型允许使用哪些方法。因为这有点混乱，我希望有一个“基本组件”并从中继承。我已经尝试过使用一个泛型typescript类，但是我不能使用decorator和更多的限制

此外，这种方法在HTML中并不是那么干净：

<idb-input type="textarea">
<idb-input type="numberfield">
<idb-input type="inputfield">

解决这个问题的正确方法是什么