Блог

Я хочу включить Stenciljs в проект, и мне нравится способ stencil связывать компоненты и откладывать загрузку только тех компонентов, которые используются на странице.

Можно ли это использовать со сторонними веб-компонентами, установленными в проекте stencil?

Например, предположим, что мы хотели использовать компонент ui5-button вместо того, чтобы использовать наш собственный. Я следую приведенным здесь инструкциям и могу импортировать веб-компонент в любой файл компонента в stencil.

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

 import { Component, Host, h } from '@stencil/core';
import "@ui5/webcomponents/dist/Button";

@Component({
  tag: 'my-custom-button',
  styleUrl: 'my-custom-button.css',
  shadow: true,
})
export class MyCustomButton {

  render() {
    return (
      <Host>
        <ui5-button><slot></slot></ui5-button>
      </Host>
    );
  }
}
 

Это работает, но я не фанат вложенности. Есть ли способ просто вернуть и сделать его частью пакета?