@Component и его параметры

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

Синтаксис использования

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  // Компонентный код
}

Параметры, передаваемые в @Component, определяют различные аспекты компонента, включая его имя, стили, поведение и взаимодействие с другими элементами на странице.

Параметры декоратора @Component

  1. tag Этот параметр определяет название пользовательского элемента, который будет использоваться в HTML-коде. Оно должно быть уникальным и следовать стандарту именования для пользовательских элементов (содержать дефис). Это название будет использоваться при внедрении компонента в HTML-документ.

    Пример:

    @Component({
  tag: 'my-component'
})
export class MyComponent {}

    В данном случае компонент будет внедряться как <my-component></my-component>.

  2. styleUrl Параметр указывает на файл с CSS-стилями, которые будут применяться к данному компоненту. Это может быть путь к внешнему файлу стилей или список таких файлов. Stencil поддерживает локализацию стилей, что означает, что стили будут применяться только к данному компоненту, а не ко всем элементам на странице.

    Пример:

    @Component({
  tag: 'my-component',
  styleUrl: 'my-component.css'
})
export class MyComponent {}

  3. styleSheets Этот параметр аналогичен styleUrl, но вместо пути к одному файлу позволяет указать массив URL-адресов или объектов с CSS. Этот подход полезен, если нужно добавить несколько файлов стилей.

    Пример:

    @Component({
  tag: 'my-component',
  styleSheets: [
    'my-component.css',
    'another-styles.css'
  ]
})
export class MyComponent {}

  4. shadow Параметр shadow включает или выключает использование Shadow DOM для компонента. Если он установлен в true, то компонент будет использовать теневой DOM, изолируя свой стиль и структуру от остальной части страницы. Это помогает избежать конфликтов стилей и скриптов.

    Пример:

    @Component({
  tag: 'my-component',
  shadow: true
})
export class MyComponent {}

    В этом случае будет использован теневой DOM, и стили компонента не будут влиять на другие элементы на странице.

  5. shadowRoot Параметр позволяет настроить поведение Shadow DOM более тонко. Он принимает значение open или closed. В случае open компонент будет доступен через свойство shadowRoot в DOM, а в случае closed доступ к нему будет ограничен.

    Пример:

    @Component({
  tag: 'my-component',
  shadow: true,
  shadowRoot: 'closed'
})
export class MyComponent {}

    В этом случае Shadow DOM будет закрытым, и доступ к нему можно будет получить только через внутреннюю логику компонента.

  6. assetsDirs Этот параметр используется для указания директорий с дополнительными статическими активами, такими как изображения, шрифты и другие ресурсы, которые должны быть доступны для компонента. Эти файлы будут загружаться и использоваться при рендеринге компонента.

    Пример:

    @Component({
  tag: 'my-component',
  assetsDirs: ['assets']
})
export class MyComponent {}

    В этом примере все файлы из папки assets будут доступны внутри компонента.

  7. excludeFromBundle Параметр, который позволяет исключить компонент из финальной сборки, если он не используется на странице. Это полезно для оптимизации загрузки, когда компоненты подключаются динамически и их нужно исключить из основной сборки.

    Пример:

    @Component({
  tag: 'my-component',
  excludeFromBundle: true
})
export class MyComponent {}

  8. internal Устанавливает компонент как внутренний, т.е. его не следует использовать в публичном API приложения. Это может быть полезно для компонентов, которые используются только внутри других компонентов.

    Пример:

    @Component({
  tag: 'my-component',
  internal: true
})
export class MyComponent {}

  9. shadowDom В отличие от параметра shadow, который включает Shadow DOM в целом, параметр shadowDom позволяет настроить более сложные сценарии использования теневого DOM, включая стили и обработку событий. Это позволяет интегрировать компоненты с другими библиотеками или фреймворками, которые могут иметь свои собственные требования к Shadow DOM.

    Пример:

    @Component({
  tag: 'my-component',
  shadowDom: { mode: 'open' }
})
export class MyComponent {}

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

Декоратор @Component также влияет на рендеринг компонента. Каждый компонент в Stencil должен содержать метод render(), который возвращает JSX-разметку. Метод render() будет вызываться каждый раз при изменении состояния компонента или при его рендере.

@Component({
  tag: 'my-component',
  shadow: true
})
export class MyComponent {
  render() {
    return <div>Hello, World!</div>;
  }
}

Этот код создаст компонент с теневым DOM, который при рендеринге будет выводить текст “Hello, World!”.

Мета-параметры

Stencil поддерживает ряд мета-параметров, которые можно передавать в декоратор @Component. Эти параметры помогают настроить поведение компонента с учетом специфики платформы или браузера.

Пример использования с мета-параметрами:

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
  assetsDirs: ['assets'],
  excludeFromBundle: true
})
export class MyComponent {}

Этот компонент будет использовать локальные стили, включать Shadow DOM и исключать себя из финальной сборки, если не используется на странице. Дополнительно он будет искать ресурсы в папке assets.

Вывод

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

Оглавление