Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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