Created
October 8, 2017 15:44
-
-
Save trusktr/725acea2e839330400aaa791aa9fbbcc to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<body> | |
<!--This script only defines classes.--> | |
<script src="./infamous.js"></script> | |
<style> | |
body, html { width: 100%; height: 100%; } | |
i-node { border: 1px solid red; } | |
</style> | |
<script> | |
console.log('--- beginning of body') | |
</script> | |
WORKS -------------------------------------------------------- | |
<script> | |
console.log(' ---- define elements ---- ') | |
infamous.html.useDefaultNames() | |
</script> | |
<i-scene> | |
<i-node absoluteSize="100 100 100" rotation="30 30 30"> | |
<p> hello </p> | |
</i-node> | |
</i-scene> | |
WORKS -------------------------------------------------------- | |
<i-scene> | |
<i-node absoluteSize="100 100 100" rotation="30 30 30"> | |
<p> hello </p> | |
</i-node> | |
</i-scene> | |
<script> | |
console.log(' ---- define elements ---- ') | |
infamous.html.useDefaultNames() | |
</script> | |
WORKS -------------------------------------------------------- | |
<script> | |
console.log(' ---- define elements ---- ') | |
infamous.html.useDefaultNames() | |
</script> | |
<script> | |
document.body.insertAdjacentHTML('beforeend', ` | |
<i-scene> | |
<i-node absoluteSize="100 100 100" rotation="30 30 30"> | |
<p> hello </p> | |
</i-node> | |
</i-scene> | |
`) | |
</script> | |
WORKS -------------------------------------------------------- | |
<script> | |
document.body.insertAdjacentHTML('beforeend', ` | |
<i-scene> | |
<i-node absoluteSize="100 100 100" rotation="30 30 30"> | |
<p> hello </p> | |
</i-node> | |
</i-scene> | |
`) | |
</script> | |
<script> | |
console.log(' ---- define elements ---- ') | |
infamous.html.useDefaultNames() | |
</script> | |
BROKEN -------------------------------------------------------- | |
<script> | |
setTimeout(() => { | |
console.log(' ---- define elements ---- ') | |
infamous.html.useDefaultNames() | |
}, 0) | |
</script> | |
<i-scene> | |
<i-node absoluteSize="100 100 100" rotation="30 30 30"> | |
<p> hello </p> | |
</i-node> | |
</i-scene> | |
BROKEN -------------------------------------------------------- | |
<script> | |
setTimeout(() => { | |
console.log(' ---- define elements ---- ') | |
infamous.html.useDefaultNames() | |
}, 0) | |
</script> | |
<script> | |
document.body.insertAdjacentHTML('beforeend', ` | |
<i-scene> | |
<i-node absoluteSize="100 100 100" rotation="30 30 30"> | |
<p> hello </p> | |
</i-node> | |
</i-scene> | |
`) | |
</script> | |
WORKS -------------------------------------------------------- | |
<script> | |
console.log(' ---- define elements ---- ') | |
infamous.html.useDefaultNames() | |
</script> | |
<script> | |
document.write(` | |
<i-scene> | |
<i-node absoluteSize="100 100 100" rotation="30 30 30"> | |
<p> hello </p> | |
</i-node> | |
</i-scene> | |
`) | |
</script> | |
WORKS -------------------------------------------------------- | |
<script> | |
document.write(` | |
<i-scene> | |
<i-node absoluteSize="100 100 100" rotation="30 30 30"> | |
<p> hello </p> | |
</i-node> | |
</i-scene> | |
`) | |
</script> | |
<script> | |
console.log(' ---- define elements ---- ') | |
infamous.html.useDefaultNames() | |
</script> | |
BROKEN -------------------------------------------------------- | |
<script> | |
setTimeout(() => { | |
console.log(' ---- define elements ---- ') | |
infamous.html.useDefaultNames() | |
}, 0) | |
</script> | |
<script> | |
document.write(` | |
<i-scene> | |
<i-node absoluteSize="100 100 100" rotation="30 30 30"> | |
<p> hello </p> | |
</i-node> | |
</i-scene> | |
`) | |
</script> | |
WORKS -------------------------------------------------------- | |
<script> | |
Promise.resolve().then(() => { | |
console.log(' ---- define elements ---- ') | |
infamous.html.useDefaultNames() | |
}) | |
</script> | |
<script> | |
document.write(` | |
<i-scene> | |
<i-node absoluteSize="100 100 100" rotation="30 30 30"> | |
<p> hello </p> | |
</i-node> | |
</i-scene> | |
`) | |
</script> | |
WORKS -------------------------------------------------------- | |
<script> | |
document.write(` | |
<i-scene> | |
<i-node absoluteSize="100 100 100" rotation="30 30 30"> | |
<p> hello </p> | |
</i-node> | |
</i-scene> | |
`) | |
</script> | |
<script> | |
Promise.resolve().then(() => { | |
console.log(' ---- define elements ---- ') | |
infamous.html.useDefaultNames() | |
}) | |
</script> | |
WORKS -------------------------------------------------------- | |
<script> | |
Promise.resolve().then(() => { | |
console.log(' ---- define elements ---- ') | |
infamous.html.useDefaultNames() | |
}) | |
</script> | |
<i-scene> | |
<i-node absoluteSize="100 100 100" rotation="30 30 30"> | |
<p> hello </p> | |
</i-node> | |
</i-scene> | |
WORKS -------------------------------------------------------- | |
<i-scene> | |
<i-node absoluteSize="100 100 100" rotation="30 30 30"> | |
<p> hello </p> | |
</i-node> | |
</i-scene> | |
<script> | |
Promise.resolve().then(() => { | |
console.log(' ---- define elements ---- ') | |
infamous.html.useDefaultNames() | |
}) | |
</script> | |
WORKS -------------------------------------------------------- | |
<script> | |
Promise.resolve().then(() => { | |
console.log(' ---- define elements ---- ') | |
infamous.html.useDefaultNames() | |
}) | |
</script> | |
<script> | |
document.body.insertAdjacentHTML('beforeend', ` | |
<i-scene> | |
<i-node absoluteSize="100 100 100" rotation="30 30 30"> | |
<p> hello </p> | |
</i-node> | |
</i-scene> | |
`) | |
</script> | |
WORKS -------------------------------------------------------- | |
<script> | |
document.body.insertAdjacentHTML('beforeend', ` | |
<i-scene> | |
<i-node absoluteSize="100 100 100" rotation="30 30 30"> | |
<p> hello </p> | |
</i-node> | |
</i-scene> | |
`) | |
</script> | |
<script> | |
Promise.resolve().then(() => { | |
console.log(' ---- define elements ---- ') | |
infamous.html.useDefaultNames() | |
}) | |
</script> | |
WORKS -------------------------------------------------------- | |
<script> | |
Promise.resolve().then(() => { | |
console.log(' ---- define elements ---- ') | |
infamous.html.useDefaultNames() | |
}) | |
</script> | |
<script> | |
document.body.insertAdjacentHTML('afterbegin', ` | |
<i-scene> | |
<i-node absoluteSize="100 100 100" rotation="30 30 30"> | |
<p> hello </p> | |
</i-node> | |
</i-scene> | |
`) | |
</script> | |
WORKS -------------------------------------------------------- | |
<script> | |
document.body.insertAdjacentHTML('afterbegin', ` | |
<i-scene> | |
<i-node absoluteSize="100 100 100" rotation="30 30 30"> | |
<p> hello </p> | |
</i-node> | |
</i-scene> | |
`) | |
</script> | |
<script> | |
Promise.resolve().then(() => { | |
console.log(' ---- define elements ---- ') | |
infamous.html.useDefaultNames() | |
}) | |
</script> | |
<script> | |
console.log('--- end of body') | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment