Включение сторонних веб-компонентов в библиотеку компонентов Stencil.js

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

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

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

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

      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>
    );
  }
}

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

0 ответов

Другие вопросы по тегам