Last active
March 14, 2025 21:01
-
-
Save henriquegogo/ea84886e9d98a97332b70d578a36fc8c to your computer and use it in GitHub Desktop.
Custom Elements from Template. Use <slot /> for variables.
This file contains hidden or 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
| document.addEventListener('DOMContentLoaded', () => { | |
| const createCustomElement = content => class extends HTMLElement { | |
| constructor() { | |
| super().attachShadow({mode: 'open'}).appendChild(content.cloneNode(true)); | |
| [...this.attributes].forEach(({name, value}) => this.appendChild( | |
| Object.assign(document.createElement('span'), {slot: name}) | |
| ).textContent = value); | |
| } | |
| }; | |
| document.querySelectorAll('template[id]').forEach(({id, content}) => | |
| customElements.define(id, createCustomElement(content))); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment