whiteinge/index.html

## index.html
<!doctype html>
<html lang=en>
<head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
        const el = h('div', {className: 'shadow-demos'}, [
            h('style', `
                .shadow-demos {
                    width: 300px;
                    border: 1px solid lightgrey;
                    margin: 1em;
                }
                hr { margin: 3em 0; }
                p { text-align: center; }
            `),

            h('p', [
                'Global styles: ',
                h('br'),
                'black, uppercase, and centered.',
            ]),

            h('hr'),

            h('#div', [
                h('p', 'Sandboxed. No styles.'),
            ]),

            h('hr'),

            h('#div', [
                h('p', 'Different sandbox.'),
                h('style', `
                    p { text-transform: uppercase; color: blue; }
                `),
            ]),

            h('hr'),

            h('#div', [
                h('p', ['Nested sandboxes.', h('br'), 'Outer']),
                h('style', `
                    p { text-transform: uppercase; color: green; }
                `),

                h('#div', [
                    h('p', 'Inner.'),
                    h('style', `
                        p { color: red; }
                    `),
                ]),
            ]),
        ])

        ready(() => {
            render(document.querySelector('#container'))(el)
        })

        // ----------------------------------------------------------------------------

        function render(el) {
            return (content) => {
                el.innerHTML = '';
                el.appendChild(content);
            }
        }

        function ready(fn) {
            if (document.readyState != 'loading') {
                fn();
            } else {
                document.addEventListener('DOMContentLoaded', fn);
            }
        }

        function h(tag, a, b) {
            let el, _el
            if (tag.startsWith('#')) {
                _el = document.createElement(tag.slice(1))
                el = _el.attachShadow({mode: 'open'})
            } else {
                el = document.createElement(tag);
            }

            // const el = document.createElement(tag);
            let attrs, children;

            if (Array.isArray(a) || typeof a === 'string' || a instanceof Element) {
                attrs = {};
                children = a;
            } else {
                attrs = a === undefined ? {} : a;
                children = b === undefined ? [] : b;
            }

            Object.entries(attrs).forEach(([key, val]) => {
                if (key === 'style' && val.constructor === Object) {
                    Object.entries(val).forEach(([k, v]) => el.style.setProperty(k, v))
                } else {
                    el[key] = val;
                }
            });

            [].concat(children).forEach(child =>
                el.appendChild(typeof child === 'string'
                    ? document.createTextNode(child)
                    : child));

            return _el || el;
        }
    </script>
</head>
<body>
    <div id="container"></div>
</body>
</html>
	<!doctype html>
	<html lang=en>
	<head>
	<meta charset=utf-8>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script>
	const el = h('div', {className: 'shadow-demos'}, [
	h('style', `
	.shadow-demos {
	width: 300px;
	border: 1px solid lightgrey;
	margin: 1em;
	}
	hr { margin: 3em 0; }
	p { text-align: center; }
	`),

	h('p', [
	'Global styles: ',
	h('br'),
	'black, uppercase, and centered.',
	]),

	h('hr'),

	h('#div', [
	h('p', 'Sandboxed. No styles.'),
	]),

	h('hr'),

	h('#div', [
	h('p', 'Different sandbox.'),
	h('style', `
	p { text-transform: uppercase; color: blue; }
	`),
	]),

	h('hr'),

	h('#div', [
	h('p', ['Nested sandboxes.', h('br'), 'Outer']),
	h('style', `
	p { text-transform: uppercase; color: green; }
	`),

	h('#div', [
	h('p', 'Inner.'),
	h('style', `
	p { color: red; }
	`),
	]),
	]),
	])

	ready(() => {
	render(document.querySelector('#container'))(el)
	})

	// ----------------------------------------------------------------------------

	function render(el) {
	return (content) => {
	el.innerHTML = '';
	el.appendChild(content);
	}
	}

	function ready(fn) {
	if (document.readyState != 'loading') {
	fn();
	} else {
	document.addEventListener('DOMContentLoaded', fn);
	}
	}

	function h(tag, a, b) {
	let el, _el
	if (tag.startsWith('#')) {
	_el = document.createElement(tag.slice(1))
	el = _el.attachShadow({mode: 'open'})
	} else {
	el = document.createElement(tag);
	}

	// const el = document.createElement(tag);
	let attrs, children;

	if (Array.isArray(a) \|\| typeof a === 'string' \|\| a instanceof Element) {
	attrs = {};
	children = a;
	} else {
	attrs = a === undefined ? {} : a;
	children = b === undefined ? [] : b;
	}

	Object.entries(attrs).forEach(([key, val]) => {
	if (key === 'style' && val.constructor === Object) {
	Object.entries(val).forEach(([k, v]) => el.style.setProperty(k, v))
	} else {
	el[key] = val;
	}
	});

	[].concat(children).forEach(child =>
	el.appendChild(typeof child === 'string'
	? document.createTextNode(child)
	: child));

	return _el \|\| el;
	}
	</script>
	</head>
	<body>
	<div id="container"></div>
	</body>
	</html>