Custom HTML-based file type: ctrl+click navigation

Assuming I have following ES6 class - MyControl.mjs

class MyControl {
    #prop;

    get prop()      { return this.#prop }
    set prop(value) { this.#prop = value; }
    onClick(e)      {}
}

and nearby MyControl.tpl

<div>
    <MyControl prop="value">
        <div onlick="@me.onClick"/>
    </MyControl>
</div>

I want to get following:

1. Ctrl+click navigation from tag "MyControl" in MyControl.tpl file to "class MyControl" in MyControl.mjs

2. the same for clicking on "prop" attribute and "me.onClick"

I expect I need to create a custom language plugin for that, as described here https://jetbrains.org/intellij/sdk/docs/reference_guide/custom_language_support.html

However my use-case does not seem to be an "absolutely new language", it is rather "customization" of HTML or XML language.
So here is the question - is there a way of minimal effort to implement such functionality by reusing stuff already available in (WebStorm), or I have to handle everything from scratch?

- - - 
And, to dig dipper, would it be significantly harder to reuse existing HTML-support when mixing 'own markup' with standard HTML tags like this.

<div>
    {#call MyControl prop="value"}
        <div onlick="@me.onClick"/>
    {/call}
</div>