Creating a component that is the "mix" of two components (extending from 2 components)

I'm building a set of components which can have variants in their behavior.

More specific, I have a x-tag component, which can behave as a <span> that simply renders text or an <a> that also renders text and links to another route.

For the "link" part I'm using the link component provided by Ember (which is the link-to) to not reimplement all the routing logic by myself.

The ideal would be to only have two components:

• x-tag, simple text version that handles the base logic.
• x-tag-link-to, link version which should be a component extending from the link-to and x-tag components.

Since you cannot extend from two components, I moved the logic in the x-tag component into a tag mixin. So the components ended up like this:

• x-tag, compoents that implements the tag mixin.
• x-tag-link-to, compoents that extends the link-to component and also implements the tag mixin.

This solves the problem, but is confusing having the logic in several files, also I have a lot more components like the tag that also have a link version, filling the mixins folder with a lot of mixins which have almost the whole component logic. That just feels wrong, or is this the right approach?

I can provide code examples if needed.