DOM elements are not recognized in custom elements

[morsh]

When writing web components (aka custom elements), I need to write something like:

export const createImage = (src) => {
    const imageElement = document.createElement('img');
    imageElement.src = '...';
    imageElement.id = 'some-image';
    return imageElement;
};

class MyCustomElement extends HTMLElement {
  connectedCallback() {
    this.appendChild(createImage());
  }
}

customElements.define('my-custom-element',  MyCustomElement);

In the above code, HTMLElement; document; this.appendChild; customElements.define are all not defined. A simple solution would be to add "lib": ["es2016", "dom"] to the tsconfig file generated in public/ folder, like so:

{
  "extends": "corvid-types/configs/tsconfig.public.json",
  "compilerOptions": {
    "baseUrl": ".",
    "lib": [ "es2016", "dom" ],
    "paths": {
      "public/*": [
        "./*"
      ]
    }
  }
}