Dynamically Define an Attribute on HTMLElement

[e111077]

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

[runem]

I think it's a really good idea 👍

Typescripts behavior when extending interfaces seems to be that the extra properties are available in all files when it's included somewhere in the TS project. I'll implement the same behavior for this feature.

In order to implement this feature, I'm going to extend web-component-analyzer with functionality analyzing extensions to interfaces and then I'm going to extend lit-analyzer with functionality that merges these into the html store.

I think these three features should be supported:

Extending HTMLElement

declare global {
  interface HTMLElement {
    foo: string;
  }
}

JSDoc

declare global {
  /**
   * @attr my-attribute
   */
  interface HTMLElement {
  }
}

Custom Elements

class MyElement extends HTMLElement {
}

declare global {
  interface MyElement {
    foo: string;
  }
}