Allow the passing of HTMLElement as the node name

[Wildhoney]

I'm experimenting with an approach where you can pass the HTMLElement to be used for the tree itself, rather than letting superfine create the element itself to then depend on the oncreate callback to gather references.

For instance:

const todoInput = document.createElement('input');

h('div', {}, [
    h(todoInput, { type: 'text', onchange: render }),
    h('div', {}, `Valid: ${todoInput.validity.valid}`)
])

Would be super useful as I'd be able to use todoInput as it is without any null checking.

The alternative being to let superfine create a random HTMLElement itself and use oncreate to re-render the tree – which causes three problems: null checking to ensure we have todoInput, multiple passes of DOM reconciliation (oncreate × node count), and a little boilerplate for the oncreate itself:

h('div', {}, [
    h('input', { type: 'text', oncreate: node => (todoInput = node, render()) }),
    todoInput.validity.valid && h('div', {}, `Valid: ${todoInput.validity.valid}`)
])

[codecov-io]

Codecov Report

Merging #161 into master will not change coverage. The diff coverage is 100%.

@@          Coverage Diff          @@
##           master   #161   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           1      1           
  Lines         183    184    +1     
  Branches       52     52           
=====================================
+ Hits          183    184    +1

Impacted Files	Coverage Δ
src/index.js	100% <100%> (ø)	:arrow_up:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 6c08e20...6fa7193. Read the comment docs.

[Wildhoney]

I've tried this locally with my library, and everything seems to work beautifully.

I can literally do the following now without re-rendering and null checks:

const form = document.createElement('form');

/* ... */

h(
    form,
    {
        novalidate: true,
        onsubmit: event => { /* ... */ }
    },
    [
        h('input', { type: 'text', required: true, oninput: render }),
        h('button', { disabled: !form.checkValidity() })
    ]
);

Also what is isSvg = isSvg all about @jorgebucaran?

[jorgebucaran]

Without lifecycle events in Superfine 7 this is not really as useful. Thanks anyway!