how to support prop passing into Element without using slots? | Ionic | Page 1

What you're looking for is probably an anti-pattern but with that in-mind....

In your example it seems you're conflating 2 things - the react example isn't an element - it's JSX. JSX will only work if you have a compilation stage which can 1) handle JSX and 2) points to the react-dom JSX pragma to process it.

You can do the same thing in stencil if you like - you just have to make sure that all consuming projects have a compilation step that 1) handles JSX and 2) points to the @stencil/core JSX pragma (h)

But I'd suggest you probably don't want to do that as custom elements are designed to be interoperable.

You can do what you want with either template literals:

@Prop() content = () => `<div>${this.something}</div>`;
...
render() {
    return (
      <Host>
        <div innerHTML={this.content()" />
      </Host>
    )
  }

Or just insert an element directly:

private contentWrap;

@Prop() content: Element;
@Watch('content')
newContent(newEle, oldEle) {
  if (oldEle) oldEle.remove();
  this.contentWrap.append(newEle);
}
...
render() {
    return (
      <Host>
        <div ref={div => this.contentWrap = div} />
      </Host>
    )
  }

All of that is untested, but you get the idea 🙂

a 3rd option - you can work with Stencil's h / 'createElement' function directly:

import { ..., h, VNode } from '@stencil/core'

 @Prop() content: (h) => VNode;
...
render() {
    return (
      <Host>
        {this.content && this.content(h)}
      </Host>
    )
  }

Users would then use it like

<my-component />

<script>
  document.querySelector('my-component').content = (h) => {
    h('strong', {class: 'my-class'}, 'Some content that I injected')
  }
</script>

Once again - untested, but should work.

#how to support prop passing into Element without using slots?