How can I make StencilJS component to render without component tag itself with TSX?

While I understand this is probably a terrible practice, I need to build StencilJS component such that inside render(), I don't want to render component tag itself due to already existing style guide and it expect DOM to be constructed in certain way. Here is what I'm trying to achieve - component code (from HTML or within another component):

<tab-header-list>
  <tab-header label="tab 1"></tab-header>
  <tab-header label="tab 2"></tab-header>
</tab-header-list>

when rendered, I want generated DOM to be something like:

<tab-header-list>
  <ul>
    <li>tab 1</li>
    <li>tab 2</li>
  </ul>
</tab-header-list>

so inside tab-header-list render() function, I'm doing

return (
  <ul>
    <slot/>
  </ul>
);

and I can do this inside tab-header render() function

@Element() el: HTMLElement;
@Prop() label: string;

render() {
  this.el.outerHTML = `<li>${this.label}</li>`;
}

to get what I want but how can I do this with TSX? (for simplicity sake, above code is really simple but what I really need to build is lot more complicated li tag with events etc so I would like to use TSX)

Tried to store DOM to variable but I'm not sure how I can assign it as this.el (outerHTML seem to be only way I can come up with, but I feel there must be better way)

@Element() el: HTMLElement;
@Prop() label: string;

render() {
  var tabheaderDOM = (<li>{this.label}</li>);

  // how can I assign above DOM to this.el somehow?
  //this.el.outerHTML = ?
}

I appreciate any help I can get - thanks in advance for your time!

Solution

Unfortunately, you can't use custom elements without tags, but there is a workaround for it:

You can use Host element as reference to the result tag.

render () {
  return (
    <Host>....</Host>
  )
}

Then in your stylesheet you can set the display property for it:

:host {
  display: contents;
}

display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself

Beware: it doesn't work in IE, opera mini... https://caniuse.com/#feat=css-display-contents

UPD:

If you are not using the shadowDOM then you need to replace :host by the tag name like:

tab-header {
  display: contents;
}