Skip to content

Instantly share code, notes, and snippets.

@freshcutdevelopment
Created September 9, 2017 00:51
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save freshcutdevelopment/b5e7e11ba5000fafadbcdae8ee4e6c9b to your computer and use it in GitHub Desktop.
HTML basics part 1 (Blog post)
<html>
<body>
<template id="info-card">
</template>
<script>
class XInfoCard extends HTMLElement {
// Monitor the 'message' attribute for changes.
static get observedAttributes() { return ['message']; }
// Respond to attribute changes.
attributeChangedCallback(attr, oldValue, newValue) {
if (attr == 'message') {
this.textContent = newValue;
}
}
createdCallback(){
let infoCard = document.querySelector('#info-card');
let infoCardInstance = document.importNode(infoCard.content, true);
var root = this.createShadowRoot(); //create a new shadow root
root.appendChild(infoCardInstance); //append the cloned template to the ShadowRoot
};
}
customElements.define('x-info-card', XInfoCard);
</script>
<x-info-card message="hello world!"></x-info-card>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment