{"id":15099454,"url":"https://github.com/lullaby6/custom-html-element","last_synced_at":"2026-01-06T17:14:26.521Z","repository":{"id":211428956,"uuid":"729114660","full_name":"lullaby6/custom-html-element","owner":"lullaby6","description":"NPM Package - Create reusable and reactive Web Components using Custom Element API","archived":false,"fork":false,"pushed_at":"2023-12-08T13:45:45.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T18:11:18.441Z","etag":null,"topics":["custom-element","custom-elements","javascript","js","npm","npm-package","web-component","web-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/custom-html-element","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lullaby6.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-12-08T12:55:23.000Z","updated_at":"2024-09-07T04:36:47.000Z","dependencies_parsed_at":"2023-12-08T14:57:46.280Z","dependency_job_id":null,"html_url":"https://github.com/lullaby6/custom-html-element","commit_stats":null,"previous_names":["lullaby6/custom-html-element","lullaby6/create-html-element"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lullaby6%2Fcustom-html-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lullaby6%2Fcustom-html-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lullaby6%2Fcustom-html-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lullaby6%2Fcustom-html-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lullaby6","download_url":"https://codeload.github.com/lullaby6/custom-html-element/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245855246,"owners_count":20683477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-element","custom-elements","javascript","js","npm","npm-package","web-component","web-components"],"created_at":"2024-09-25T17:21:22.075Z","updated_at":"2026-01-06T17:14:26.493Z","avatar_url":"https://github.com/lullaby6.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# custom-html-element\n\nCreate reusable and reactive Web Components using Custom Element API.\n\n# Installation\n\nUsing NPM:\n\n```sh\nnpm install custom-html-element\n```\n\nUsing the CDN:\n\n```html\n\u003cscript defer src='https://cdn.jsdelivr.net/npm/custom-html-element/dist/cdn.js'\u003e\u003c/script\u003e\n```\n\n# Usage\n\n## Sintax showcase\n\nJavaScript:\n\n```js\n// if you are using the CDN, you don't need import anything\nimport {customHTMLElement} from 'custom-html-element'\n\nfunction MyElement(){\n    return `\n        \u003ch1\u003eHello World\u003c/h1\u003e\n    `\n}\n\n// use the customHTMLElement method to define the custom element\ncustomHTMLElement(MyElement)\n```\n\nHTML:\n\n```html\n\u003cmy-element\u003e\u003c/my-element\u003e\n```\n\n## Using children elements\n\nthe inner HTML of the element ```slot``` inside of your custom element will be setted by the original inner HTML of the custom element.\n\nJavaScript:\n\n```js\nfunction MyElement({count}){\n    return `\n        \u003ch1\u003eWorld\u003c/h1\u003e\n        \u003cslot\u003e\u003c/slot\u003e\n    `\n}\n```\n\nHTML:\n\n```html\n\u003cmy-element\u003e\n    \u003ch1\u003eWorld\u003c/h1\u003e\n\u003c/my-element\u003e\n```\n\n\n## Let's create a simple button counter\n\nJavaScript:\n\n```js\nimport {customHTMLElement, HTMLElementAddEventListener} from 'custom-html-element'\n\nfunction MyCounter({count}){\n\n    // creating a reference to hit the button\n    const ref = crypto.randomUUID()\n\n    /*\n    use the HTMLElementAddEventListener method for add a\n    event listener to elements inside custom elements\n    */\n    HTMLElementAddEventListener(ref, 'click', () =\u003e {\n\n        // when any attribute of the custom element is updated, it will be re-rendered\n        this.setAttribute('count', parseInt(count) + 1)\n\n    })\n\n    return `\n        \u003cbutton id=\"${ref}\"\u003e${count}\u003c/button\u003e\n    `\n}\n\ncustomHTMLElement(MyCounter)\n```\n\nHTML:\n\n```html\n\u003c!--\nyou need to specify the attributes to be used in the\ncustom element function, otherwise it will throw an error\n --\u003e\n\u003cmy-counter count=\"0\"\u003e\u003c/my-counter\u003e\n```\n\n## Now let's create a simple ToDo List App\n\nJavaScript:\n\n```js\nimport {createHTMLElement, HTMLElementAddEventListener} from './index.js'\n\nfunction TodoList({todos}) {\n    todos = JSON.parse(todos)\n\n    const formRef = crypto.randomUUID()\n\n    HTMLElementAddEventListener(formRef, 'submit', (event) =\u003e {\n        event.preventDefault()\n        const formData = new FormData(event.target)\n        const formProps = Object.fromEntries(formData)\n\n        todos.push({id: crypto.randomUUID(), text: formProps['todo']})\n\n        this.setAttribute('todos', JSON.stringify(todos))\n    })\n\n    todos.forEach(todo =\u003e {\n        HTMLElementAddEventListener(todo.id, 'click', (event) =\u003e {\n            todos.splice(todos.findIndex(todo =\u003e todo.id === event.target.id), 1)\n\n            this.setAttribute('todos', JSON.stringify(todos))\n        })\n    })\n\n    return `\n        \u003cdiv\u003e\n            \u003cform id=\"${formRef}\"\u003e\n                \u003cinput type=\"text\" placeholder=\"todo\" name=\"todo\"\u003e\n                \u003cinput type=\"submit\" value=\"add todo\"\u003e\n            \u003c/form\u003e\n            \u003cul\u003e\n                ${todos.map(todo =\u003e `\n                    \u003cli id=\"${todo.id}\"\u003e${todo.text}\u003c/li\u003e`\n                ).join('')}\n            \u003c/ul\u003e\n        \u003c/div\u003e\n    `\n}\n\ncreateHTMLElement(TodoList)\n```\n\nHTML:\n\n```html\n\u003ctodo-list todos='[]'\u003e\u003c/todo-list\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flullaby6%2Fcustom-html-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flullaby6%2Fcustom-html-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flullaby6%2Fcustom-html-element/lists"}