How to use tsyringe library Dependency injection while building WebComponents?

Question

I am building an app where we are effectively using https://github.com/microsoft/tsyringe along with Webpack 5. My first few classes and DOM interaction went ahead like a charm including a custom event subscription mechanism.

But now I am stuck while trying to implement a WebComponent within that same project. It always throws an error -

Uncaught TypeError: Failed to construct 'HTMLDivElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
    at class_1.DesignDirector [as constructor] (DesignDirector.ts:41:1)
    at new class_1 (Decorator.ts:36:1)
    at dependency-container.js:354:1
    at InternalDependencyContainer.construct (dependency-container.js:362:10)
    at InternalDependencyContainer.resolve (dependency-container.js:113:1)
    at 665 (StageManager.ts:29:1)
    at __webpack_require__ (bootstrap:19:1)
    at 973 (main.ts:16:22)
    at __webpack_require__ (bootstrap:19:1)
    at startup:4:1

I am using es6 as a target and have added the required polyfills.