如何从外部（甚至内部）获取自定义元素的标记名？

Question

我目前的做法：

自定义元素：

@customElement("bb-flow-identification")
export class FlowIdentification extends LitElement { /*...*/ }

其他地点：

import { FlowIdentification } from "./flow-identification";

// The following yields the name of the class, e.g. 'FlowIdentification'
console.log(FlowIdentification.name);

如何从 'Other location' 文件中获取 bb-flow-identification 标记名？如果这不起作用，我可以通过某种方式从 'Custom Element' 文件访问它吗？

PS：这个问题不是针对lit的，但是我在lit框架中也遇到了这个问题。

Answer 1

您可以只依赖简单的 JavaScript 语义。

export const ELEM_NAME = "bb-flow-identification";

@customElement(ELEM_NAME)
export class FlowIdentification extends LitElement {

  static registeredName = ELEM_NAME;
}

然后您可以将其用作：

// Usage
import { FlowIdentification, ELEM_NAME } from "./flow-identification";


// Option 1
console.log(ELEM_NAME);

// Option 2
console.log(FlowIdentification.registeredName);

如何从外部（甚至内部）获取自定义元素的标记名？

How to get the tagname of a custom element from the outside (or even inside)?

web-component

typescript

custom-element

lit-element

lit