Skip to content

Instantly share code, notes, and snippets.

@henriquegogo

henriquegogo/custele.js

Last active March 14, 2025 21:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save henriquegogo/ea84886e9d98a97332b70d578a36fc8c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save henriquegogo/ea84886e9d98a97332b70d578a36fc8c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. henriquegogo revised this gist Mar 14, 2025. 2 changed files with 10 additions and 11 deletions.
    9 changes: 3 additions & 6 deletions custele.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    document.addEventListener('DOMContentLoaded', () => {
    const createCustomElement = content => class extends HTMLElement {
    document.querySelectorAll('template[id]').forEach(({id, content}) =>
    customElements.define(id, class extends HTMLElement {
    constructor() {
    super().attachShadow({mode: 'open'}).appendChild(content.cloneNode(true));
    [...this.attributes].forEach(({name, value}) => {
    @@ -10,7 +10,4 @@ document.addEventListener('DOMContentLoaded', () => {
    !el.getAttribute(name) && el.setAttribute(name, value));
    });
    }
    };
    document.querySelectorAll('template[id]').forEach(({id, content}) =>
    customElements.define(id, createCustomElement(content)));
    });
    }));
    12 changes: 7 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,12 @@
    <script defer src="./script.js"></script>

    <x-button onclick="console.log('here')" label="Button 1">Click here</x-button>

    <x-button onclick="console.log('now')" label="Button 2">Click now!</x-button>

    <template id="x-button">
    <style>label { display: block; }</style>
    <label><slot name="label"></slot>
    <button onclick><slot></slot></button>
    </label>
    </template>

    <x-button onclick="console.log('here')" label="Button 1">Click here</x-button>

    <x-button onclick="console.log('now')" label="Button 2">Click now!</x-button>
    </template>
  2. henriquegogo revised this gist Mar 14, 2025. 1 changed file with 10 additions and 0 deletions.
    10 changes: 10 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    <template id="x-button">
    <style>label { display: block; }</style>
    <label><slot name="label"></slot>
    <button onclick><slot></slot></button>
    </label>
    </template>

    <x-button onclick="console.log('here')" label="Button 1">Click here</x-button>

    <x-button onclick="console.log('now')" label="Button 2">Click now!</x-button>
  3. henriquegogo revised this gist Mar 14, 2025. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion custele.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,9 +6,11 @@ document.addEventListener('DOMContentLoaded', () => {
    const span = document.createElement('span');
    this.appendChild(Object.assign(span, {slot: name})).textContent = value;
    this.removeAttribute(name)
    this.shadowRoot.querySelectorAll(`[${name}]`).forEach(el =>
    !el.getAttribute(name) && el.setAttribute(name, value));
    });
    }
    };
    document.querySelectorAll('template[id]').forEach(({id, content}) =>
    customElements.define(id, createCustomElement(content)));
    });
    });
  4. henriquegogo revised this gist Mar 14, 2025. 1 changed file with 5 additions and 3 deletions.
    8 changes: 5 additions & 3 deletions custele.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,9 +2,11 @@ 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);
    [...this.attributes].forEach(({name, value}) => {
    const span = document.createElement('span');
    this.appendChild(Object.assign(span, {slot: name})).textContent = value;
    this.removeAttribute(name)
    });
    }
    };
    document.querySelectorAll('template[id]').forEach(({id, content}) =>
  5. henriquegogo revised this gist Mar 14, 2025. 1 changed file with 11 additions and 11 deletions.
    22 changes: 11 additions & 11 deletions custele.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,12 @@
    document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('template[id]').forEach(({id, content}) => {
    customElements.define(id, 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);
    }
    });
    });
    });
    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)));
    });
  6. henriquegogo created this gist Mar 14, 2025.
    12 changes: 12 additions & 0 deletions custele.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('template[id]').forEach(({id, content}) => {
    customElements.define(id, 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);
    }
    });
    });
    });