atom / etch

Builds components using a simple and explicit API around virtual-dom

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add some form of reference/alias to root tag name

thomasjo opened this issue · comments

Right now the element's root tag is duplicated in both the registration and the render method—e.g.

const TaskList = etch.defineElement('div', {
  // Define the element's content via a `render` method
  render () {
    return (
      <div className='task-list'>
        <h1>Tasks:</h1>
        <ol>{
          this.tasks.map(task =>
            <li className='task' key={task.id}>
              <input type='checkbox' checked={task.completed}>
              task.description
            </li>
          )
        }</ol>
      </div>
    )
  },
// ...

It would be awesome if this could be avoided by introducing some type of reference, alias or some such. Perhaps something like

const TaskList = etch.defineElement('div', {
  // Define the element's content via a `render` method
  render () {
    return (
      <root className='task-list'>
        <h1>Tasks:</h1>
// ...

The root tag name is available as the standard tagName property on the element itself, though it's capitalized. I do agree it's a bit of a bummer to have to repeat the tag name, but I'm not sure it's worth the complexity of adding a whole facility for this.

Given the upcoming changes, this issue is no longer valid 💥