Как создать веб-компонент с помощью Stencil.js

Веб-компоненты — это набор технологий, позволяющих создавать многократно используемые элементы и повторно использовать их в различных веб-приложениях.

Stencil.js — это компилятор, который генерирует веб-компоненты, совместимые со всеми современными браузерами. Он предоставляет инструменты и API, которые помогут вам создавать быстрые, эффективные и масштабируемые веб-компоненты.

Начало работы с Stencil.js

Чтобы начать работу с Stencil.js, вам сначала нужно инициализировать его на своем компьютере.

Сделайте это, выполнив следующую команду в терминале node.js:

трафарет инициализации npm

После запуска команды на экране появится приглашение выбрать проект, с которого вы хотите начать:

Чтобы продолжить, выберите вариант компонента, введите имя вашего проекта и подтвердите свой выбор:

Затем перейдите в каталог вашего проекта и установите зависимости, выполнив следующие команды:

компакт-диск первый трафарет-проект
установка нпм

Создание нового веб-компонента

Чтобы создать новый веб-компонент в Stencil.js, создайте путь к папке, например источник/компоненты. Папка компонентов будет содержать файл TypeScript, названный в честь вашего компонента, например Stencil.js. использует язык TypeScript и JSX для разработки компонентов. Папка также будет содержать файл CSS, содержащий стиль вашего компонента.

Например, если вы хотите создать компонент с именем «my-button», создайте файл с именем моя-кнопка.tsx и файл CSS с именем моя-кнопка.css. в моя-кнопка.tsx файл, определите свой компонент с помощью Stencil.js API:

Импортировать { Компонент, ч } от'@трафарет/ядро';
@Компонент({
 ярлык: 'моя кнопка',
 URL-адрес стиля: 'моя-кнопка.css',
 тень: истинный,
})
экспортсортМоя кнопка{
 оказывать() {
возвращаться (
Нажмите на меня</button>
 );
 }
}

Этот код импортирует Компонент и час функции из Stencil.js. Компонент функция определяет компонент, а час функция создает свою разметку с помощью HTML.

Определите свой компонент, используя @Компонент декоратор, который принимает объект с тремя свойствами: ярлык, URL-адрес стиля, и тень.

ярлык свойство содержит имя тега компонента. URL-адрес стиля Свойство указывает файл CSS для стилизации пользовательского элемента. Наконец, тень Свойство — логическое значение, указывающее, будет ли компонент использовать Shadow DOM для инкапсуляции стилей и поведения пользовательского элемента. В методе рендеринга вы создаете элемент кнопки.

В добавок к URL-адрес стиля свойство, вы можете использовать еще два свойства для стиля вашего компонента: стиль и URL стиля.

стиль свойство определяет встроенные стили для компонента. Он принимает строковое значение, представляющее стили CSS для компонента:

Импортировать { Компонент, ч } от'@трафарет/ядро';
@Компонент({
 ярлык: 'моя кнопка',
 стиль: `
 кнопка {
 заполнение: 1бэр 0.5бэр;
 радиус границы: 12пкс;
 семейство шрифтов: скоропись;
 граница: нет;
 цвет: #e2e2e2;
 фоновый цвет: #333333;
 вес шрифта: полужирный;
 }
`,
 тень: истинный,
})
экспортсортМоя кнопка{
 оказывать() {
возвращаться (
Нажмите на меня</button>
 );
 }
}

URL стиля Свойство указывает несколько внешних файлов CSS для стилизации компонента. Он принимает массив строковых значений, представляющих пути к файлам CSS:

Импортировать { Компонент, ч } от'@трафарет/ядро';
@Компонент({
 ярлык: 'моя кнопка',
 URL стиля: ['моя-кнопка.css', 'другая-кнопка.css'],
 тень: истинный,
})
экспортсортМоя кнопка{
 оказывать() {
возвращаться (
Нажмите на меня</button>
 );
 }
}

Рендеринг веб-компонента

После того, как вы создали свой веб-компонент, вы можете отобразить его в файле HTML, добавив тег пользовательского элемента. Вот как вы можете включить компонент my-button:

HTML>
<HTMLдиректор="лтр"язык="ан">
<голова>
<метакодировка="утф-8" />
<метаимя="окно просмотра"содержание=«Ширина = ширина устройства, начальный масштаб = 1,0, минимальный масштаб = 1,0, максимальный масштаб = 5,0» />
<связьhref=""отн.="таблица стилей">
<заголовок>Стартовый компонент трафаретазаголовок>
<сценарийтип="модуль"источник="/сборка/первый-трафарет-проект.esm.js">сценарий>
<сценарийномодульисточник="/сборка/первый трафарет-проект.js">сценарий>
голова>
<тело>
<моя кнопка>моя кнопка>
тело>
HTML>

Теперь вы можете создавать веб-компоненты с помощью Stencil.js

Stencil.js — это мощный инструмент для создания быстрых, эффективных и масштабируемых веб-компонентов. Его API и инструменты упрощают создание веб-компонентов и управление ими, а его совместимость со всеми современными браузерами гарантирует, что ваши компоненты будут хорошо работать в различных веб-приложениях.

Поскольку веб-компоненты становятся все более популярными, Stencil.js — это фреймворк, который следует учитывать при создании повторно используемых элементов для Интернета.