nevir/index.html

## 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>

## 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);
	<!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>