WCC REPL
Input
const template = document.createElement('template'); template.innerHTML = ` <style>.footer{color:white;background-color:#192a27;}</style> <footer class="footer"> <h4>My Blog © ${new Date().getFullYear()}</h4> </footer> `; class Footer extends HTMLElement { connectedCallback() { if (!this.shadowRoot) { this.attachShadow({ mode: 'open' }); this.shadowRoot.appendChild(template.content.cloneNode(true)); } } } export default Footer; customElements.define('wcc-footer', Footer);
Output