Добавление Lit в существующий проект

Lit не требует специальных инструментов, а компоненты Lit работают в любом фреймворке JavaScript, а также с любой серверной системой шаблонов или CMS. Поэтому Lit идеально подходит для добавления в существующие проекты и приложения.

Сначала установите пакет lit из npm:

npm i lit

Если вы ещё не используете npm для управления зависимостями JavaScript, сначала настройте проект. Мы рекомендуем npm CLI.

Создать новый элемент можно в любом месте исходного кода проекта:

lib/components/my-element.ts

import {LitElement, html} from 'lit';
import {customElement} from 'lit/decorators.js';

@customElement('my-element')
class MyElement extends LitElement {
  render() {
    return html`
      <div>Hello from MyElement!</div>
    `;
  }
}

import {LitElement, html} from 'lit';

class MyElement extends LitElement {
  render() {
    return html`
      <div>Hello from MyElement!</div>
    `;
  }
}
customElements.define('my-element', MyElement);

Способ использования компонента зависит от вашего проекта и используемых в нём библиотек или фреймворков. Компонент можно использовать в HTML, с API DOM или в языках шаблонов:

<script type="module" src="/lib/components/my-element.js">
<my-element></my-element>

JSX — очень распространённый язык шаблонов. В JSX имена элементов в нижнем регистре создают элементы HTML, которыми и являются компоненты Lit. Используйте имя тега, указанное в декораторе @customElement():

import './components/my-element.js';

export const App = () => (
  <h1>My App</h1>
  <my-element></my-element>
)

Большинство фреймворков JavaScript отлично поддерживают веб-компоненты и Lit. Просто импортируйте определение элемента и используйте имена тегов элементов в шаблонах.

Теперь вы должны быть в состоянии собрать и запустить проект и увидеть сообщение «Привет от MyElement!».

Если вы готовы добавить функции в компонент, перейдите к разделу «Компоненты», чтобы узнать, как создать свой первый компонент Lit, или к разделу «Шаблоны», чтобы узнать подробнее о написании шаблонов.

Подробнее о сборке проектов, включая примеры конфигураций Rollup, см. в разделе Сборка для production.

Редактировать эту страницу