props attribute is null when declaring child component inside parent component

Hi @ducksoupdev, Please look at this code

import { html, renderer } from 'https://cdn.skypack.dev/@ficusjs/renderers@4/htm'
import { createCustomElement, createComponent } from 'https://cdn.skypack.dev/ficusjs'

createCustomElement('hello-world', {
  renderer,
  state() {
    return {me: {name: 'ficusjs', type: 'javascript'}}
  },
  handleClick (e) {
    window.alert('Hello to you!')
  },
  childComponent: createComponent('comp-child', {
    props: {parent: {type: Object, required: true, observed: false}, foo: {type: Object, required: true, observed: false}},
    render () {
      return html`<p>Hello ${this.props.foo.name}</p>`
    }
  }),
  render () {
    return html`
      <div>
        <comp-child parent=${this} foo=${this.state.me}></comp-child>
        <button type="button" onclick="${this.handleClick}">Click me</button>
      </div>
    `
  }
})

this.state.me has value but cannot be transfered to child’s props. By the way, what is the better way to communicate between parent and child (child is declared inside of parent)? Without using event-bus to subcribe. I use parent=${this} as property but haven’t test it.

[ducksoupdev]

I have created a codepen that matches your description.

https://codepen.io/ducksoupdev/pen/VwrzjJd

Components are registered with the CustomElementRegistry so must be statically declared. This can be done using a creator function as shown in the codepen.

[Dan-Do]

That’s great. Thank you very much.