Here’s what I believe will be an accurate translation of that example to the normal DOM API (without having actually looked at the RE:DOM source code):
The children call produces an array of objects that are appended to the element, but the callback also takes the wrapping element (in this case `login`), and so to be conveniently able to access it later (`login.email.value`) it also assigns them there. A more conventional JavaScript approach would be to assign email, pass and submit as local variables rather than stuffing them inside the form object.
As for the other example:
const app = document.createElement('table');
const tbody = document.createElement('tbody');
app.appendChild(tbody);
app.update = function(data) {
tbody.innerHTML = '';
for (let row in data.tbody) {
let tr = document.createElement('tr');
for (let cell in row) {
let td = document.createElement('td');
td.textContent = cell;
tr.appendChild(td);
}
tbody.appendChild(tr);
}
}
document.body.appendChild(app);
app.update({
tbody: [
[1, 2, 3],
],
});
This is rather simpler, frankly. I prefer plain DOM for myself at this level.
That is a great explanation and after looking at the source code and reading the example more closely that is indeed what appears to happen.
I do think that, albeit very clever, it's a confusing pattern though...
And too tricky - assigning to arbitrary properties on a DOM object can have arbitrary side effects if ever you happen to overload a predefined property (on any browser).
As for the other example:
This is rather simpler, frankly. I prefer plain DOM for myself at this level.