Skip to content

Instantly share code, notes, and snippets.

@mholtzhausen

mholtzhausen/WebComponent with Shadow Rom

Last active August 29, 2015 14:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mholtzhausen/3a557e73b252e902da44 to your computer and use it in GitHub Desktop.
Save mholtzhausen/3a557e73b252e902da44 to your computer and use it in GitHub Desktop.
Download ZIP
VLWrmM
Raw
index.html
<html>
<head></head>
<body>
<bn-quote><author>Mark</author><quote>Some Quote</quote></bn-quote>
<bn-quote><author>Mark</author><quote>Some Quote</quote></bn-quote>
<bn-quote><author>Mark</author><quote>Some Quote</quote></bn-quote>
<bn-quote><author>Mark</author><quote>Some Quote</quote></bn-quote>
<bn-quote><author>Mark</author><quote>Some Quote</quote></bn-quote>
</body>
</html>
Raw
script.js
console.clear();
var Component = function(tagName, template, controller){
var Controller = function(elem){
this.element = elem;
this.content = this.element.children;
this.init = function(){};
};
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function(){
var elem=this;
controller = typeof controller == 'function' ? controller : function(){}
elem.controller = new controller();
elem.controller.__proto__=new Controller(elem);
//console.log(elem.controller);
elem.controller.init();
var shadow = elem.createShadowRoot();;
shadow.innerHTML = template;
};
return document.registerElement(tagName,{prototype:proto});
};
var bnQuote = Component('bn-quote','<style>.bn-quote{ display: block; margin: 5px; padding:5px; border: 1px solid #ccc; position: relative} .author{position:absolute; bottom:0px; right: 0px; font-style: italic}</style><div class="bn-quote">{{quote}}<span class="author">{{author}}</span></div>',function(){
this.init=function(){
this.element.addEventListener('click',function(){ console.log('click triggered');});
}
});
Raw
WebComponent with Shadow Rom
VLWrmM
------
A [Pen](http://codepen.io/Nemesarial/pen/VLWrmM) by [Mark Holtzhausen](http://codepen.io/Nemesarial) on [CodePen](http://codepen.io/).
[License](http://codepen.io/Nemesarial/pen/VLWrmM/license).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment