Snabbdom allows you to provide alternative DOM implementations. This project provides a standard HTML DOM API along with iframe support, so that you can simply patch content inside of
And the childNodes will be added/removed from the
The
<iframe>
elements. This allows one to do something like:var vnode0 = document.createElement('iframe');
document.body.appendChild(vnode0);
var vnode1 = h('iframe', [
h('ul', [
h('li', 'Thing 1'),
h('li', 'Thing 2')
]),
h('span', 'Another thing.')
]);
patch(vnode0, vnode1);
patch(vnode1, h('iframe', [
h('ul', [
h('li', 'Thing 0'),
h('li', 'Thing 1'),
h('li', 'Thing 2')
])
]));
And the childNodes will be added/removed from the
contentDocument.body
of the iframe when the iframe is fully ready/loaded.Usage
Default
The default implementation simply uses the current window'sdocument
to create elements. This implementation is accessible as the default export.import domApi from 'snabbdom-iframe-domapi';
import snabbdom from 'snabbdom';
import snabbdomClass from 'snabbdom/modules/class';
import snabbdomProps from 'snabbdom/modules/props';
import snabbdomEventListeners from 'snabbdom/modules/eventlisteners';
let patch = snabbdom.init([
snabbdomClass,
snabbdomProps,
snabbdomEventListeners
], domApi);
Options
You can also specify aclean
option to the createApi
function. This will cause the implementation to create a new, clean Document (untouched by any changes to window globals), and it will use this "clean" document to create elements.The
createApi
function simply takes a hash of option values:import { createApi } from 'snabbdom-iframe-domapi';
import snabbdom from 'snabbdom';
import snabbdomClass from 'snabbdom/modules/class';
import snabbdomProps from 'snabbdom/modules/props';
import snabbdomEventListeners from 'snabbdom/modules/eventlisteners';
const domApi = createApi({ clean: true });
let patch = snabbdom.init([
snabbdomClass,
snabbdomProps,
snabbdomEventListeners
], domApi);