Блог

Я уже около 1 дня работаю с LitElement и веб-компонентами. Я пытался найти ответ на этот вопрос, но пока безуспешно, и, конечно, у меня есть крайние сроки.

Я пишу библиотеку компонентов с чистым интерфейсом Typescript. По сути, хост может вызвать метод API для создания экземпляра моего окна с использованием HTMLElement в качестве родительского узла. Я определил веб-компонент на основе LitElement в файле:

 // main-element.ts
import * as Lit from 'lit-element';    

export class MainElement extends Lit.LitElement {
  createRenderRoot() {
    return this; // Don't use shadow root
  }

  render() {
    return Lit.html`
      <div>
        Hello, world!
      </div>
    `;
  }
}

window.customElements.define('main-element', MainElement);

declare global {
  interface HTMLElementTagNameMap {
    'main-element': MainElement;
  }
}
 

В моем файле ‘module.ts’ (который обрабатывает метод API) он пытается создать экземпляр этого внутреннего веб-компонента:

 // module.ts
// ...

createWindow(context: MyWindowContext): void {
  context.parentElement.appendChild(document.createElement('main-element'));
}

// ...
 

Когда я запускаю игровую площадку для разработчиков, использующую эту библиотеку, на экране ничего не отображается. Кроме того, ‘main-element.ts’ не загружается как один из исходных файлов. Однако, если я изменю ‘module.ts’, чтобы фактически импортировать файл и сделать что-то глупое с классом, это сработает:

 // module.ts
// import { MainElement } from './components/main-element.ts'; // ADD THIS
// ...

createWindow(context: MyWindowContext): void {
  const element: MainElement = new MainElement(); // ADD THIS
  console.log(element.isConnected); // ADD THIS
  context.parentElement.appendChild(document.createElement('main-element'));
}

// ...
 

Итак, ясно, что ‘main-element.ts’ не выбирается как часть пакета, потому что он явно не импортируется нигде по цепочке. Я предполагаю, что есть что-то, что я могу добавить в свою конфигурацию Webpack, которая загрузит эти файлы веб-компонентов? Есть ли другой способ использования этих веб-компонентов?

Заранее спасибо!

• Стив

Вам необходимо импортировать файлы, чтобы иметь возможность их использовать. Где-то должна быть инструкция import, чтобы Webpack знал, что нужно включить этот файл в пакет.

Если все, что вас интересует, это загрузка веб-компонента, вы также можете импортировать его следующим образом

import './components/main-element.ts' ;

При этом будет запущена функция определения пользовательских элементов

window.customElements.define('main-element', MainElement);

который добавляет веб-компонент в реестр пользовательских элементов браузера.

Делаем это таким образом

import { MainElement } from './components/main-element.ts';

импортирует класс MainElement. Это также имеет побочный эффект вызова customElements.define , поскольку оно просто помещается в файл, и когда этот файл импортируется, эта функция будет выполнена.