1

I'm looking to include Stenciljs in a project and love stencil's way of bundling components and lazy loading only the components being used on the page.

Can this be used with third party web components installed in the stencil project?

For example, let's say we wanted to use the ui5-button component instead of rolling our own. I follow the instructions here and am able to import the web component into any component file in stencil.

This is fine if I wanted to use as a child component of a larger component like so:

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

This works but I'm not a fan of the nesting. Is there a way to simply return and make it part of the bundle?

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
Kenji Crosland
  • 2,914
  • 6
  • 31
  • 40

0 Answers0