Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
HTML basics part 1 (Blog post)
<template id="info-card">
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;
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);
<x-info-card message="hello world!"></x-info-card>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment