How to use the incremental-dom.elementOpen function in incremental-dom

// fragment (direct vdom)
    if (!tag) return children.forEach(render)

    let el

    // <ul is="">
    if (is) {
      function create() { return document.createElement(tag, { is }) }
      el = elementOpen(create, key, staticProps, ...props)
      children.forEach(render)
      elementClose(create)
    }

    // if (!children) el = elementVoid(tag, key, staticProps, ...props)
    else {
      el = elementOpen(tag, key, staticProps, ...props)
      children.forEach(render)
      elementClose(tag)
    }

    // plan aspects init
    if (use) (new $(el)).use(...use)

    // run provided effects
    for (let effect in effects) {
      $(el)[effect](effects[effect])
    }
  }
</ul>

// fragment (direct vdom)
      if (!tag) return children.forEach(render)

      let el

      // <ul is="">
      if (is) {
        function create() { return document.createElement(tag, { is }) }
        el = elementOpen(create, key, staticProps, ...props)
        children.forEach(render)
        elementClose(create)
      }

      // if (!children) el = elementVoid(tag, key, staticProps, ...props)
      else {
        el = elementOpen(tag, key, staticProps, ...props)
        children.forEach(render)
        elementClose(tag)
      }

      // plan aspects init
      if (use) (new $(el)).use(...use)

      // run provided effects
      for (let effect in effects) {
        $(el)[effect](effects[effect])
      }
    }
</ul>

}

  if (typeof arg === 'object' && !arg[_vnode]) return text(arg.toString())

  // objects create elements
  let { tag, key, props, staticProps, children } = arg

  // fragment (direct vdom)
  if (!tag) return children && children.forEach(render)

  let el
  if (!children || !children.length) {
    el = elementVoid(tag, key, staticProps, ...props)
  }
  else {
    el = elementOpen(tag, key, staticProps, ...props)
    children.forEach(render)
    elementClose(tag)
  }
}

function ReadView({todo, startEditingTodo}) {
  function onDoubleClick() {
    startEditingTodo(todo.id);

    // TODO: Better way of access the real DOM element of a component?
    // Here we want to focus the input field and set the curor to the end
    const input = document.querySelector('.edit');
    input.focus();
    input.setSelectionRange(input.value.length, input.value.length);
  }

  elementOpen('div', null, ['class', 'view']);
    elementVoid('input', null, ['class', 'toggle', 'type', 'checkbox']);
    elementOpen('label', null, null, 'ondblclick', onDoubleClick);
      text(todo.text);
    elementClose('label');
    elementVoid('button', null, ['class', 'destroy']);
  elementClose('div');
}

function ReadView({todo, startEditingTodo}) {
  function onDoubleClick() {
    startEditingTodo(todo.id);

    // TODO: Better way of access the real DOM element of a component?
    // Here we want to focus the input field and set the curor to the end
    const input = document.querySelector('.edit');
    input.focus();
    input.setSelectionRange(input.value.length, input.value.length);
  }

  elementOpen('div', null, ['class', 'view']);
    elementVoid('input', null, ['class', 'toggle', 'type', 'checkbox']);
    elementOpen('label', null, null, 'ondblclick', onDoubleClick);
      text(todo.text);
    elementClose('label');
    elementVoid('button', null, ['class', 'destroy']);
  elementClose('div');
}

export default function({addTodo}) {
  elementOpen('header', null, null, 'class', 'header');
    elementOpen('h1');
      text('todos');
    elementClose('h1');
    TodoTextInput({newTodo: true});
  elementClose('header');
};

export default function({editing, newTodo, text, onSave}) {
  function handleBlur(e) {
    if (!newTodo) {
      onSave(e.target.value);
    }
  }

  elementOpen(
    'input', null,
    ['type', 'text'],
    'class', classnames({
      edit: editing,
      'new-todo': newTodo
    }),
    'value', text,
    'onblur', handleBlur
  );
  elementClose('input');
};

export default function({todos, user, actions}) {
  elementOpen('section', null, ['class', 'main']);
    elementOpen('ul', null, ['class', 'todo-list']);
      todos.map(todo => {
        TodoItem({todo, editing: user.editing === todo.id, ...actions});
      });
    elementClose('ul');
  elementClose('section');
};

export default function({addTodo}) {
  elementOpen('header', null, null, 'class', 'header');
    elementOpen('h1');
      text('todos');
    elementClose('h1');
    TodoTextInput({newTodo: true});
  elementClose('header');
};

export default function({todos, user, actions}) {
  elementOpen('section', null, ['class', 'main']);
    elementOpen('ul', null, ['class', 'todo-list']);
      todos.map(todo => {
        TodoItem({todo, editing: user.editing === todo.id, ...actions});
      });
    elementClose('ul');
  elementClose('section');
};