Skip to content

Instantly share code, notes, and snippets.

@valdrinkoshi

valdrinkoshi/my-element.html

Last active March 14, 2017 23:56
Show Gist options
  • Save valdrinkoshi/d9e943c98528e9fa40e64afab41b15fb to your computer and use it in GitHub Desktop.
Save valdrinkoshi/d9e943c98528e9fa40e64afab41b15fb to your computer and use it in GitHub Desktop.
Download ZIP
Custom Elements not upgraded (chrome 57). Run `runner.html`
Raw
my-element.html
<script>
customElements.define('my-element', class MyElement extends HTMLElement {});
</script>
Raw
runner.html
<html>
<body>
<pre id="out"></pre>
<script>
var runs = 200;
var run = 0;
window.runTest = function() {
if (run === runs) return;
run++;
out.textContent = (run + '/' + runs);
var el = document.querySelector('iframe');
el && el.parentNode.removeChild(el);
el = document.createElement('iframe');
el.src = 'test.html';
document.body.appendChild(el);
}
runTest();
</script>
</body>
</html>
Raw
test-fixture-injector.js
// inject this in certain conditions
document.write('<link rel="import" href="test-fixture.html">');
Raw
test-fixture.html
<script>
customElements.define('test-fixture', class TestFixture extends HTMLElement {});
</script>
Raw
test.html
<html>
<head>
<script src="test-fixture-injector.js"></script>
<link rel="import" href="my-element.html">
<link rel="import" href="404-1.html">
<link rel="import" href="404-2.html">
</head>
<body>
<test-fixture></test-fixture>
<script>
const el = document.querySelector('test-fixture');
const klass = customElements.get('test-fixture');
if (el instanceof klass === false) {
throw 'test-fixture not upgraded!';
}
window.top.runTest && window.top.runTest();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment