Last active
July 6, 2018 07:22
-
-
Save OliverLeitner/60dd6bc1f999c79f75caba2883648b5b to your computer and use it in GitHub Desktop.
native web components
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment