tomalec · November 11, 2015 19:18
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Polymer's dom-bind two-way data binding to native element</title>
   <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
  <link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">
  <script>
  	    var MyElementPrototype = Object.create(HTMLElement.prototype, {
          message: {
            get: function() {
              return this._message;
            },
            set: function(value) {
              this._message = value;
              var e = new CustomEvent('message-changed', {
                detail: {
                  value: this._message
                }
              });
              this.textContent = this._message;
              this.dispatchEvent(e);
            }
          }
        });

        MyElementPrototype.createdCallback = function() {
          this.textContent = "no message notified";
        };
    
  	    MyElementPrototype.attributeChangedCallback = function(name, oldVal, newVal){
  	    	if (name === "message"){
  	    		this.message = newVal;
  	    	}
  	    };
    
 	    document.registerElement('my-element', {
 	      prototype: MyElementPrototype
 	    });
  </script>
 </head>
 <body>

  <template is="dom-bind" id="t">
  	Change value to be notified <input value="{{message::input}}">
    <p>Message: <span>{{message}}</span></p>
  	<my-element message="{{message}}"></my-element>
  </template>
 	<script>
 	  var t = document.querySelector('#t');
  	  // Another attempt to make Polymer binding work..
 	  t.addEventListener('dom-change', function() {
 	  	var myelement = document.querySelector("my-element");
 	  	myelement.addEventListener("message-changed", function(){
  	    	console.log('external listener was notified', event.details);
 	    });
 	  });

 	</script>



 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Polymer's dom-bind two-way data binding to native element</title>
	<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
	<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">
	<script>
	var MyElementPrototype = Object.create(HTMLElement.prototype, {
	message: {
	get: function() {
	return this._message;
	},
	set: function(value) {
	this._message = value;
	var e = new CustomEvent('message-changed', {
	detail: {
	value: this._message
	}
	});
	this.textContent = this._message;
	this.dispatchEvent(e);
	}
	}
	});

	MyElementPrototype.createdCallback = function() {
	this.textContent = "no message notified";
	};

	MyElementPrototype.attributeChangedCallback = function(name, oldVal, newVal){
	if (name === "message"){
	this.message = newVal;
	}
	};

	document.registerElement('my-element', {
	prototype: MyElementPrototype
	});
	</script>
	</head>
	<body>

	<template is="dom-bind" id="t">
	Change value to be notified <input value="{{message::input}}">
	<p>Message: <span>{{message}}</span></p>
	<my-element message="{{message}}"></my-element>
	</template>
	<script>
	var t = document.querySelector('#t');
	// Another attempt to make Polymer binding work..
	t.addEventListener('dom-change', function() {
	var myelement = document.querySelector("my-element");
	myelement.addEventListener("message-changed", function(){
	console.log('external listener was notified', event.details);
	});
	});

	</script>



	</body>
	</html>