💡 Support for custom element usage

[filipxperi]

Suggest an idea for Knip

We're using Lit, but I think that this topic applies to any custom element usage/framework.

The issue is that when registering a custom element you register it under a separate name than the class name.
And then you're free to use the registered element name in html.

The problem is that knip doesn't track these usages. Which in turn results in it marking all custom elements as unused.

[webpro]

Looking into this, and some initial patterns.

Native customElements.define:

export class RegisteredElement extends HTMLElement {
  connectedCallback() {}
}

customElements.define('app-registered', RegisteredElement);

Lit:

import {LitElement, html} from 'lit';
import {customElement} from 'lit/decorators.js';

@customElement('my-element')
class MyElement extends LitElement {
  render() {
    return html`
      <div>Hello from MyElement!</div>
    `;
  }
}

If the RegisteredElement class is exported:

• Perhaps ignoreExportsUsedInFile: { class: true } is an option (https://knip.dev/reference/configuration#ignoreexportsusedinfile).
• If it's only exported e.g. to be able to test it, see https://knip.dev/reference/jsdoc-tsdoc-tags#internal

Tracking usage of the registered element in html is a different topic.

• For the generic standard customElements.define we can't know where server-rendered html even comes from.
• For Lit specifically though, we could explore tracking usage within html tagged templates. This is the ask here, right? Would html tagged template scanning in JS/TS source files cover all potential use cases?