Component composition? about tonic

[heapwolf]

Thanks for opening this issue, I think we could use a better composition example in the docs! The idea is, you take the innerHTML of the element (before the component is first rendered) and save it on a property. We could create this property automatically for the user, that might be nice, I'm using this pattern quite a bit.

class Parent extends Tonic {
  render () {
    this.children = this.children || this.root.innerHTML

    return `
      <div class="parent">${this.children}</div>
    `
  }
}

Tonic.add(Parent)

class Child extends Tonic {
  render () {
    return `
      <div class="child">
        ${this.props.value}
      </div>
    `
  }
}

Tonic.add(Child)

INPUT HTML

<parent>
  <child value="hello world"></child>
</parent>

OUTPUT HTML

(Like web-components, we want to preserve the host elements)

<parent>
  <div class="parent">
    <child>
      <div class="child">hello world</div>
    </child>
  </div>
</parent>

[heapwolf]

I thought about this a bit and I decided it's totally reasonable to add some sugar for this (especially since I use the pattern a lot when creating components). I added a section to the docs (https://hxoht.github.io/components/#custom). Let me know what you think, if you like it we can close this out. :)

[benwiley4000]

Looks great! Thanks. :)