[SOLVED] EsLint won't recognise my Web Components extended HTMLElement interfaces

EsLint won't recognise my Web Components extended HTMLElement interfaces

I've built a bunch of web components with StencilJS and published them to NPM. Next, I did install the NPM package in my Angular 11 app and followed Stencils Angular framework integration guide. The custom elements work fine but when I defined the types and have "no-undef" set in my esLint ruleset, I get the following error from esLint:

"'HTMLMiIconElement' is not defined"

Which is the extended HTMLElement interface of my web component.

When imported manually to the typeScript file where it is used everything seems to work but I know from previous projects that it should not be necessary.

I think that I oversee something and would appreciate any help! :)

my-component-file.ts

const miIconElement: HTMLMiIconElement = document.createElement('mi-icon');

.eslintrc.js

module.exports = {
    "root": true,
    'overrides': [
        {
            "files": ["*.ts"],
            'parser': '@typescript-eslint/parser',
            'env': {
                'browser': true,
                'es6': true,
                'jest': true
            },
            'globals': {
                'google': 'readonly'
            },
            'parserOptions': {
                ecmaVersion: 2020,  // Allows for the parsing of modern ECMAScript features
                sourceType: 'module'  // Allows for the use of imports
            },
            'rules': {
                'no-undef': 2,
            }
        },
        {
            "files": ["*.html"],
            "parser": "@angular-eslint/template-parser",
            "plugins": ["@angular-eslint/template"],
        }
    ]
};

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "downlevelIteration": true,
    "module": "esnext",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2020",
      "dom"
    ],
    "types": [
      "node",
      "jest",
      "googlemaps"
    ]
  }
}

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [
      "node",
      "googlemaps"
    ]
  },
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

Solution