Использование компонента в HTML

Для использования компонента в HTML необходимо сначала создать сам компонент с помощью фреймворка Stencil. Компонент Stencil представляет собой пользовательский элемент, который может быть использован на любой веб-странице, независимо от того, какой фреймворк или библиотеку использует проект. Основной принцип работы с компонентами Stencil заключается в создании классов, которые расширяют возможности стандартных HTML-элементов.

Компоненты Stencil обладают всеми характеристиками обычных веб-компонентов: они инкапсулируют свой функционал, поддерживают работу с состоянием, могут иметь свойства, методы и события.

Структура компонента

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

  • @Component — определяет метаданные компонента, такие как имя элемента, путь к стилям, и другие настройки.
  • @Prop — используется для создания публичных свойств компонента.
  • @State — создает внутренние состояния компонента.
  • @Method — позволяет объявить публичные методы компонента.

Пример простого компонента:

import { Component, h, Prop } from '@stencil/core';

@Component({
  tag: 'my-greeting',
  styleUrl: 'my-greeting.css',
  shadow: true
})
export class MyGreeting {
  @Prop() name: string;

  render() {
    return <div>Hello, {this.name}!</div>;
  }
}

В этом примере компонент my-greeting выводит приветственное сообщение с именем, переданным через атрибут name.

Подключение компонента к HTML

После того как компонент создан, его необходимо интегрировать в HTML-страницу. Для этого нужно подключить скомпилированные файлы компонентов, созданные с помощью Stencil, и использовать сам компонент как обычный HTML-элемент.

  1. Подключение скомпилированных файлов: Когда проект Stencil компилируется, создается набор файлов, включая файл JavaScript с описанием компонента. Эти файлы нужно подключить в HTML-страницу:
<script type="module" src="/build/my-component.js"></script>
  1. Использование компонента: Теперь компонент можно использовать в HTML-коде, как любой другой элемент. Пример использования компонента:
<my-greeting name="Alice"></my-greeting>

При этом компонент my-greeting будет рендерить в браузере сообщение “Hello, Alice!”.

Адаптация компонентов для многократного использования

Компоненты Stencil можно сделать более гибкими и многоразовыми, предоставляя им различные способы настройки через свойства и атрибуты.

  • Передача данных через атрибуты: Атрибуты HTML-элементов, такие как name в примере выше, передаются как свойства компонента через декоратор @Prop. Важным моментом является то, что изменения значений атрибутов автоматически приводят к перерендеру компонента.
<my-greeting name="Bob"></my-greeting>
  • Использование слотов для контента: Если необходимо вставить в компонент динамический HTML-контент, можно использовать слоты.
@Component({
  tag: 'my-card',
  styleUrl: 'my-card.css',
  shadow: true
})
export class MyCard {
  render() {
    return (
      <div class="card">
        <slot></slot>
      </div>
    );
  }
}

Теперь можно передавать в этот компонент произвольный контент:

<my-card>
  <h1>Заголовок карточки</h1>
  <p>Описание карточки</p>
</my-card>

Работа с событиями

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

События могут быть переданы через декоратор @Event, а их использование включает в себя создание и привязку обработчиков в родительском компоненте.

Пример компонента с событием:

import { Component, Event, EventEmitter, h } from '@stencil/core';

@Component({
  tag: 'my-button',
  styleUrl: 'my-button.css',
  shadow: true
})
export class MyButton {
  @Event() clicked: EventEmitter;

  handleClick() {
    this.clicked.emit('Button clicked!');
  }

  render() {
    return <button onCl ick={() => this.handleClick()}>Click me</button>;
  }
}

В родительском компоненте или на странице можно привязать обработчик события:

<my-button onClic ked="alert(event.detail)"></my-button>

В этом примере, при клике на кнопку, будет выведено сообщение с данными, переданными в событии.

Использование компонентов с условной рендерингом

Stencil позволяет условно рендерить части компонента в зависимости от состояния. Это можно использовать для динамического обновления контента в зависимости от состояния компонента.

Пример использования условия для рендеринга:

@Component({
  tag: 'my-toggle',
  styleUrl: 'my-toggle.css',
  shadow: true
})
export class MyToggle {
  @State() isVisible: boolean = false;

  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }

  render() {
    return (
      <div>
        <button onCl ick={() => this.toggleVisibility()}>
          Toggle
        </button>
        {this.isVisible && <p>Content is now visible!</p>}
      </div>
    );
  }
}

В этом примере кнопка переключает видимость текста в зависимости от состояния isVisible.

Подключение стилей и шрифтов

Stencil поддерживает использование кастомных стилей для компонентов через файл CSS или SASS, а также загрузку шрифтов и других ресурсов. Стили могут быть инкапсулированы в компоненте (через Shadow DOM) или глобальными.

  • Инкапсуляция стилей через Shadow DOM: Включение стилей непосредственно в компонент позволяет избежать конфликтов стилей между компонентами.
@Component({
  tag: 'my-card',
  styleUrl: 'my-card.css',
  shadow: true
})
export class MyCard {
  render() {
    return (
      <div class="card">
        <slot></slot>
      </div>
    );
  }
}
  • Использование глобальных стилей: Для глобальных стилей необходимо определить их в основной части приложения, вне компонента. В этом случае компоненты не будут инкапсулировать свои стили.
<link rel="stylesheet" href="/styles/global.css">

Поддержка разных браузеров

Stencil автоматически генерирует кроссбраузерный код с учетом всех современных стандартов. Каждый компонент компилируется в стандартизованный формат, который совместим с большинством популярных браузеров, включая Chrome, Firefox, Safari и Edge.

Заключение

Компоненты Stencil обеспечивают гибкость и мощность для разработки веб-приложений. Использование этих компонентов в HTML-странице позволяет создавать инкапсулированные, многократно используемые элементы, которые могут быть интегрированы в различные веб-приложения без зависимости от выбранного фреймворка.

Оглавление