mikeal / gza

Functional custom HTML elements.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Feature: support inline elements in templates

mikeal opened this issue · comments

let div = document.createElement('div')
gza`
<my-element>
  ${ () => div }
</my-element>
`

This would be quite useful for sub-components. It also opens up the possibility for people to add elements that do not get blown away on re-render.

let init = async element => {
  if (!element.sub) element.sub = document.createElement('sub-component')
}
gza`
${ init }
<my-element ${sub: null}>
  <container>${ settings => settings.sub }</container>
</my-element>
`

Interested in what @yoshuawuyts thinks :)

Note: I don't like that you have to set the property to null in order to initialize it as a setting. There should probably be an element level API for adding a new setting.

let init = element => element.set('name', value)
gza`
${ init }
<my-element>
  <container>${ settings => settings.name }</container>
</my-element>
`

Fixed.