Stencil usage - how to load external dependent stencil component in stencil module - but not to add in final build

I am planning to create filter box web component using @stencil/core library.In this filter component, i need to load external atomic web components like (dropdown, input, radio) implemented using @stencil/core itself. But i dont want these external web component to be part of final bundle of filter web component

Usage:I want to use this filter component in host application using Angular.

And its responsibility of HOST application to import all atomic web component/external dependencies like dropdown/radio web component. Filter web component should not load these dependencies or take them in its build

Example:**Dropdown **component's tsx file - bundled as dropdown npm package

import { Component, Prop, State, Event, EventEmitter, h } from '@stencil/core';@Component({  tag: 'my-dropdown',  styleUrl: 'dropdown.scss'})export class myDropdown {  /**   * @public   * @property items   *   * Defines the data that we want to load into our dropdown area   *    */  public items: Array<any> = [    {      heading: 'Virtual DOM',      description: 'A tree of custom objects representing a part of the DOM which can be acted upon quicker than manipulating the DOM itself'    },    {      heading: 'Async rendering',      description: 'Allows parts of a component state to be rendered asynchronously (I.e. via XHR)'    },    {      heading: 'Reactive data-binding',      description: 'Allows data binding to be implemented through binding a state variable to an onChange event which allows the state to be changed as the input value changes'    }  ];  /**   * @public   * @property name   * @type String   *   * This will accept values supplied by a name attribute    * on the component HTML   */  @Prop() name: string;  /**   * @type boolean   *   * This will track state changes (I.e. whether the    * dropdown component is open or closed)   */  @State() toggle: boolean = false;  @Event({    eventName: 'itemClicked',    composed: true,    bubbles: true,    cancelable: true  }) itemClicked: EventEmitter;  /**   * @type EventEmitter   *   * Track component events (I.e. activation of dropdown component)   */  @Event({    composed: true,    bubbles: true,    eventName: 'toggleDropdown',    cancelable: true  }) onToggle: EventEmitter;  /**   * @public   * @method toggleComponent   *   * This will manage the dropdown component event and state changes   */  toggleComponent(): void {    this.toggle = !this.toggle;    // When the user click emit the toggle state value    // A event can emit any type of value    this.onToggle.emit({ visible: this.toggle });  }  onListItemClicked(ind) {    console.log(ind);    this.itemClicked.emit({ index: ind });  }  /**    * Create HTML representation of component DOM and return this     for output to the browser DOM   */  render() {    return (<div class="container"><h2 onClick={() => this.toggleComponent()}>{this.name} {this.toggle ? <span>&#9650;</span> : <span>&#9660;</span>}</h2><ul class={this.toggle ? 'active' : 'inactive'}>          {this.items.map((item, index) => <li onClick={this.onListItemClicked.bind(this, index)}><h3>{item.heading}</h3><p>{item.description}</p></li>)}</ul></div>    )  }}

In my wrapper web component - MyComponent.tsx

import { Component, Prop, h, Listen } from '@stencil/core';import { IButtonClickEvent } from '../simple-button/simple-button.model';import 'dropdown';@Component({  tag: 'my-component',  styleUrl: 'my-component.css',  shadow: true})export class MyComponent {  /**   * The first name   */  @Prop() first: string;  /**   * The middle name   */  @Prop() middle: string;  /**   * The last name   */  @Prop() last: string;  private getText(): string {    return this.first + this.middle + this.last;  }  @Listen('buttonClicked')  onButtonClickHandler(evt:CustomEvent<IButtonClickEvent>){    console.log(evt)  }  @Listen('itemClicked')  itemClickedHandler(event: CustomEvent) {    console.log('Received the custom itemClicked event: ', event.detail);  }  render() {    return (<div class="container" style={{'font-size': '12px','padding':'10px','border':'2px solid red'     }}><div class="sc-abc abc">Hello, World! I'm {this.getText()}</div><simple-button type="raised" color="primary">Child</simple-button><my-dropdown name="Stencil key features"></my-dropdown></div>    );  }}

I m loading this dropdown using 'import dropdown' - this works fine.But issue with this is - stencil config considers this dropdown as well in final build of MyComponent. I want to ignore dropdown bundle to be included in final build.Host application (Angular app) to install and load dropdown as per requirement