Regex for Highlighting HTML between JS Template Literals for VS Code

Question

I've built a VS Code extension to highlight template-literal strings in JavaScript.

E.g.

const templateLiteralString = `
    <div class="some-class">
        <style>h1{color: lime;}</style>
        <h1>Hello World!</h1>
        <script>console.log('Hello World')</script>
    </div>`

This is the "begin" regex:

`"(\\s+|[a-zA-Z]+?)(\\(|\\[?)(?!.*(\\/\\*(no-html)\\*\\/\\s+?))(`)(?!.*//$)"`

This is the "end" regex:

"(`)(?!.*//$)"

I have a couple of problems I would like to solve:

1. I cannot get the highlighter to work correctly as a single argument or when surrounded by brackets of any kind. (see the red curly bracket, same happens for square)
2. I cannot get the highlighter to work when the last back-tick has white space before it. It either has to come straight after the HTML or it must be the first character on the line.

Here's the JSON syntax file: https://github.com/julienetie/vscode-template-literals/tree/master/syntaxes

{
    "fileTypes": [
      
    ],
    "injectionSelector": "L:source.js -comment -(string -meta.embedded), L:source.jsx -comment -(string -meta.embedded),  L:source.js.jsx -comment -(string -meta.embedded), L:source.ts -comment -(string -meta.embedded), L:source.tsx -comment -(string -meta.embedded)",
    "injections": {
      "L:source": {
        "patterns": [
          {
            "match": "<",
            "name": "invalid.illegal.bad-angle-bracket.html"
          }
        ]
      }
    },
    "patterns": [
      {
        "name": "string.js.taggedTemplate",
        "contentName": "meta.embedded.block.html",
        "begin": "(\\s+|[a-zA-Z]+?)(\\(|\\[?)(?!.*(\\/\\*(no-html)\\*\\/\\s+?))(`)(?!.*//$)",
        "beginCaptures": {
          "1": {
            "name": "entity.name.function.tagged-template.js"
          },
          "2": {
            "name": "punctuation.definition.string.template.begin.js"
          }
        },
        "end": "(`)(?!.*//$)",
        "endCaptures": {
          "0": {
            "name": "string.js"
          },
          "1": {
            "name": "punctuation.definition.string.template.end.js"
          }
        },
        "patterns": [
          {
            "include": "source.ts#template-substitution-element"
          },
          {
            "include": "text.html.basic"
          }
        ]
      }
    ],
    "scopeName": "inline.lit-html"
  }

Any suggestions or help will be appreciated as I'm not a regex guru. Thanks