Skip to content

Instantly share code, notes, and snippets.

@nevir

nevir/index.html

Created February 7, 2015 00:45
Show Gist options
  • Save nevir/231eef336127c7450065 to your computer and use it in GitHub Desktop.
Save nevir/231eef336127c7450065 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/baholi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<template id="shadowRootTemplate">
<style>
div { border: red solid 1px; }
</style>
<div>
<content id="one"></content>
<content id="two"></content>
</div>
</template>
<div id="host">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>
</div>
<script id="jsbin-javascript">
// distribution polyfill
~function() {
var invalidValue = '!!!!';
var count = 0;
var map = new Map();
HTMLContentElement.disable = function(root) {
[].forEach.call(root.querySelectorAll('content'), function(content) {
content.select = invalidValue;
});
};
HTMLContentElement.prototype.distribute = function(child) {
var distributor = map.get(this);
if (!distributor) {
distributor = new Distributor('d-' + count++);
distributor.initialize(this);
map.set(this, distributor);
}
distributor.distribute(child);
};
function Distributor(id) {
this.id = id;
}
Distributor.prototype.initialize = function(content) {
content.select = '.' + this.id;
};
Distributor.prototype.distribute = function(child) {
child.classList.add(this.id);
};
}();
var shadowRootTemplate = document.querySelector('#shadowRootTemplate');
var host = document.querySelector('#host');
var root = host.createShadowRoot();
root.appendChild(document.importNode(shadowRootTemplate.content, true));
HTMLContentElement.disable(root);
var one = root.querySelector('#one');
var two = root.querySelector('#two');
var a = document.querySelector('#a');
var b = document.querySelector('#b');
one.distribute(a);
two.distribute(b);
console.log(one, two, a, b);
</script>
<script id="jsbin-source-javascript" type="text/javascript">
// distribution polyfill
~function() {
var invalidValue = '!!!!';
var count = 0;
var map = new Map();
HTMLContentElement.disable = function(root) {
[].forEach.call(root.querySelectorAll('content'), function(content) {
content.select = invalidValue;
});
};
HTMLContentElement.prototype.distribute = function(child) {
var distributor = map.get(this);
if (!distributor) {
distributor = new Distributor('d-' + count++);
distributor.initialize(this);
map.set(this, distributor);
}
distributor.distribute(child);
};
function Distributor(id) {
this.id = id;
}
Distributor.prototype.initialize = function(content) {
content.select = '.' + this.id;
};
Distributor.prototype.distribute = function(child) {
child.classList.add(this.id);
};
}();
var shadowRootTemplate = document.querySelector('#shadowRootTemplate');
var host = document.querySelector('#host');
var root = host.createShadowRoot();
root.appendChild(document.importNode(shadowRootTemplate.content, true));
HTMLContentElement.disable(root);
var one = root.querySelector('#one');
var two = root.querySelector('#two');
var a = document.querySelector('#a');
var b = document.querySelector('#b');
one.distribute(a);
two.distribute(b);
console.log(one, two, a, b);</script></body>
</html>
Raw
jsbin.baholi.js
// distribution polyfill
~function() {
var invalidValue = '!!!!';
var count = 0;
var map = new Map();
HTMLContentElement.disable = function(root) {
[].forEach.call(root.querySelectorAll('content'), function(content) {
content.select = invalidValue;
});
};
HTMLContentElement.prototype.distribute = function(child) {
var distributor = map.get(this);
if (!distributor) {
distributor = new Distributor('d-' + count++);
distributor.initialize(this);
map.set(this, distributor);
}
distributor.distribute(child);
};
function Distributor(id) {
this.id = id;
}
Distributor.prototype.initialize = function(content) {
content.select = '.' + this.id;
};
Distributor.prototype.distribute = function(child) {
child.classList.add(this.id);
};
}();
var shadowRootTemplate = document.querySelector('#shadowRootTemplate');
var host = document.querySelector('#host');
var root = host.createShadowRoot();
root.appendChild(document.importNode(shadowRootTemplate.content, true));
HTMLContentElement.disable(root);
var one = root.querySelector('#one');
var two = root.querySelector('#two');
var a = document.querySelector('#a');
var b = document.querySelector('#b');
one.distribute(a);
two.distribute(b);
console.log(one, two, a, b);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment