Acceder Registrarme

Web component en HTML

Por: Kevin Arnold Arias Figueroa Publicado el: 2017-06-30 03:56:10 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<hello-world who="Kevin Arnold"></hello-world>

	<template>
		<p>Hello <strong></strong> :)</p>
	</template>

	<script>
		(function(window, document, undefined)
		{
			var thatDoc=document;
			var thisDoc= (thatDoc._currentScript || thatDoc.currentScript).ownerDocument;

			var template=thisDoc.querySelector('template').content;

			var myElementProto=Object.create(HTMLElement.prototype);

			myElementProto.who='World';

			myElementProto.createdCallback=function()
			{
				var shadowRoot=this.createShadowRoot();
				var clone=thatDoc.importNode(template, true);
				shadowRoot.appendChild(clone);

				this.strong=shadowRoot.querySelector('strong');

				if(this.hasAttribute('who'))
				{
					var who=this.getAttribute('who');
					this.setWho(who);
				}
				else
				{
					this.setWho(this.who);
				}
			};

			myElementProto.attributeChangedCallback=function(attr, oldVal, newVal)
			{
				if(attr==='who')
				{
					this.setWho(newVal);
				}
			};

			myElementProto.setWho=function(val) 
			{
				this.who=val;
				this.strong.textContent=this.who;
			};

			window.MyElement=thatDoc.registerElement('hello-world', 
			{
				prototype: myElementProto
			});
		})(window, document);
	</script>
</body>
</html>

Referencia:

https://www.w3.org/TR/2013/WD-components-intro-20130606/

https://github.com/webcomponents/hello-world-element/blob/master/hello-world.html