Description

Hello, I'm currently writing a component that needs to search for an identifying attribute in the light DOM. e.g.

<mwc-dialog>
  <div>
	This is my content!!!
	Here is an input that should be focused when opened:
	<input mdc-dialog-initial-focus>
  </div>
  <button
	  slot="primaryAction"
	  mdc-dialog-action="close">
	Close dialog
  </button>
</mwc-dialog>

Problem

The problem is that lit-analyzer will warn that mdc-dialog-inital-focus is not defined on input. Though, I'd only like to define this attribute if mwc-dialog is imported.

Expected

Trying to figure out how this would work, I was attempting the following to try to remedy this, but it didn't seem to work

Using global interfaces

declare global {
  interface HTMLElement {
    "mdc-dialog-action": string;
    "mdc-dialog-initial-focus": boolean;
  }
}

...
html`<div mdc-dialog-inital-focus></div>`

expected no warning on either and possible even autocompletion with lit-plugin in vscode.

Result

There is a warning on those attributes

Workaround-ish

Trying to hack web-component-analyzer

/**
 * @element div
 * @attr mdc-dialog-action
 * @attr mdc-dialog-initial-focus
 */

/**
 * @element input
 * @attr mdc-dialog-action
 * @attr mdc-dialog-initial-focus
 */

/**
 * @element button
 * @attr mdc-dialog-action
 * @attr mdc-dialog-initial-focus
 */

...
// etc. but it doesn't work for custom-elements