Пробую создать свой npm пакет с компонентами на базе lit, появляется ошибка
Uncaught DOMException: CustomElementRegistry.define: has already been defined as a custom element.
1. Создал свой компонент на базе lit:
import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";
@customElement("custom-button")
export class Button extends LitElement {
protected override render() {
return html` <button class="button">test</button>`;
}
}
2. скомпилировал npm пакет локально в lit_test.tgz
3. создал проект куда скопировал архив с npm пакетом
4. в проекта для тестирования компонентов создал
index.ts:
import { Button } from 'lit_test';
const button = new Button;
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Lit Example</title>
<script type="module" src="./index.js"></script>
</head>
<body>
<custom-button></custom-button>
</body>
</html>
Компонент отображается но в js консоли браузера ошибка:
Uncaught DOMException: CustomElementRegistry.define: 'custom-button' has already been defined as a custom element
Если из index.ts убрать код
const button = new Button;, то в консоли ошибок нет компонент не отрисовывается.
Средний
Средний
