OliverLeitner/index.html

## index.html
<!doctype html>
<html>
    <head>
        <title>native web components</title>
        <meta charset="utf-8">
        <!-- polyfill needed for firefox and probably internet explorer as well... -->
        <script src="/node_modules/webcomponents.js/webcomponents.js"></script>
        <!-- the actual component, looks a helllotta like ng, good to finally get where theyre coming from -->
        <link rel="import" href="template.html">
        <link rel="import" href="template2.html">
    </head>
    <body>
        <div id="shell"></div>
        <div id="shell2">
            <team-member data-alt="Gil fink image" data-name="Gil fink" data-title="Senior consultant" data-src="http://sparxys.azurewebsites.net/Content/Images/Team/GilFink.jpg"></team-member>
            <team-member data-alt="Another image" data-name="Gil fink1" data-title="Senior consultant" data-src="http://gilfink.azurewebsites.net/Images/Carousel/Gil2.jpg"></team-member>
        </div>
        <div id="host"></div>
        <script>
            //broken in firefox, even with webcomponents polyfill enabled...
            //wc.js dont like .import (as stated on their website webcomponents.org)
            //using WebComponentsReady eventlistener instead
            window.addEventListener('WebComponentsReady', function(e) {
                const importContent = document.querySelector('link[rel="import"]').import;
                const template = importContent.querySelector('#myTemplate');
                const clone = document.importNode(template.content, true);
                document.querySelector('#shell').appendChild(clone);
            });
            //firefox fixage...
            //about:config -> shadowdom.enabled = true, then stuff starts to work...
            host.attachShadow({mode: 'open'});
            host.shadowRoot.innerHTML = '<p>Lurking in the shadows</p>';
        </script>
    </body>
</html>

## template.html
<template id="teamMemberTmpl">
    <style>
            .teamMember {
                float: left;
                width: 152px;
                height: 285px;
                border: 1px solid #262262;
                background-color: #279bd4;
                margin-bottom: 20px;
            }
            .teamMember > .photo {
                height: 225px;
                width: 150px;
                background-color: #fff;
                text-align: center;
            }
            .teamMember > .name {
                color: #fff;
                font-size: 15px;
                width: 150px;
                text-align: center;
            }
            .teamMember > .title {
                color: #fff;
                font-size: 12px;
                width: 150px;
                text-align: center;
            }
    </style>
    <div title="Gil fink" class="teamMember">
        <div class="photo">
            <img alt="" src="" width="150" height="225">
        </div>
        <div class="name"></div>
        <div class="title"></div>
    </div>
</template>
<script>
    //webcomponents.org -> use _currentScript in template...
    var thisDoc = document._currentScript.ownerDocument;
    var teamMemberTmpl = thisDoc.querySelector('#teamMemberTmpl');
    // Create a prototype for a new element that extends HTMLElement
    var teamMemberPrototype = Object.create(HTMLElement.prototype);
    // Setup our Shadow DOM and clone the template
    teamMemberPrototype.createdCallback = function () {
        var root = this.createShadowRoot();
        root.appendChild(document.importNode(teamMemberTmpl.content, true));
        var img = root.querySelector(".teamMember > .photo img");
        img.setAttribute('src', this.getAttribute('data-src'));
        img.setAttribute('alt', this.getAttribute('data-alt'));
        var name = root.querySelector('.name');
        name.textContent = this.getAttribute('data-name');
        var title = root.querySelector('.title');
        title.textContent = this.getAttribute('data-title');
    };
    // Register our new element
    var teamMember = document.registerElement('team-member', {
        prototype: teamMemberPrototype
    });
</script>

## template2.html
<template id="myTemplate">
    <h1>My template rules!</h1>
</template>
<!-- dont place script tags into template tags at this point in
    time, because that script wont get activated... -->
<script>
    console.log("Log executed once the template is activated");
</script>
	<!doctype html>
	<html>
	<head>
	<title>native web components</title>
	<meta charset="utf-8">
	<!-- polyfill needed for firefox and probably internet explorer as well... -->
	<script src="/node_modules/webcomponents.js/webcomponents.js"></script>
	<!-- the actual component, looks a helllotta like ng, good to finally get where theyre coming from -->
	<link rel="import" href="template.html">
	<link rel="import" href="template2.html">
	</head>
	<body>
	<div id="shell"></div>
	<div id="shell2">
	<team-member data-alt="Gil fink image" data-name="Gil fink" data-title="Senior consultant" data-src="http://sparxys.azurewebsites.net/Content/Images/Team/GilFink.jpg"></team-member>
	<team-member data-alt="Another image" data-name="Gil fink1" data-title="Senior consultant" data-src="http://gilfink.azurewebsites.net/Images/Carousel/Gil2.jpg"></team-member>
	</div>
	<div id="host"></div>
	<script>
	//broken in firefox, even with webcomponents polyfill enabled...
	//wc.js dont like .import (as stated on their website webcomponents.org)
	//using WebComponentsReady eventlistener instead
	window.addEventListener('WebComponentsReady', function(e) {
	const importContent = document.querySelector('link[rel="import"]').import;
	const template = importContent.querySelector('#myTemplate');
	const clone = document.importNode(template.content, true);
	document.querySelector('#shell').appendChild(clone);
	});
	//firefox fixage...
	//about:config -> shadowdom.enabled = true, then stuff starts to work...
	host.attachShadow({mode: 'open'});
	host.shadowRoot.innerHTML = '<p>Lurking in the shadows</p>';
	</script>
	</body>
	</html>
	<template id="teamMemberTmpl">
	<style>
	.teamMember {
	float: left;
	width: 152px;
	height: 285px;
	border: 1px solid #262262;
	background-color: #279bd4;
	margin-bottom: 20px;
	}
	.teamMember > .photo {
	height: 225px;
	width: 150px;
	background-color: #fff;
	text-align: center;
	}
	.teamMember > .name {
	color: #fff;
	font-size: 15px;
	width: 150px;
	text-align: center;
	}
	.teamMember > .title {
	color: #fff;
	font-size: 12px;
	width: 150px;
	text-align: center;
	}
	</style>
	<div title="Gil fink" class="teamMember">
	<div class="photo">
	<img alt="" src="" width="150" height="225">
	</div>
	<div class="name"></div>
	<div class="title"></div>
	</div>
	</template>
	<script>
	//webcomponents.org -> use _currentScript in template...
	var thisDoc = document._currentScript.ownerDocument;
	var teamMemberTmpl = thisDoc.querySelector('#teamMemberTmpl');
	// Create a prototype for a new element that extends HTMLElement
	var teamMemberPrototype = Object.create(HTMLElement.prototype);
	// Setup our Shadow DOM and clone the template
	teamMemberPrototype.createdCallback = function () {
	var root = this.createShadowRoot();
	root.appendChild(document.importNode(teamMemberTmpl.content, true));
	var img = root.querySelector(".teamMember > .photo img");
	img.setAttribute('src', this.getAttribute('data-src'));
	img.setAttribute('alt', this.getAttribute('data-alt'));
	var name = root.querySelector('.name');
	name.textContent = this.getAttribute('data-name');
	var title = root.querySelector('.title');
	title.textContent = this.getAttribute('data-title');
	};
	// Register our new element
	var teamMember = document.registerElement('team-member', {
	prototype: teamMemberPrototype
	});
	</script>
	<template id="myTemplate">
	<h1>My template rules!</h1>
	</template>
	<!-- dont place script tags into template tags at this point in
	time, because that script wont get activated... -->
	<script>
	console.log("Log executed once the template is activated");
	</script>