{"id":13826501,"url":"https://github.com/WebReflection/regular-elements","last_synced_at":"2025-07-09T00:33:36.914Z","repository":{"id":57352483,"uuid":"158006785","full_name":"WebReflection/regular-elements","owner":"WebReflection","description":"Custom Elements made available for any node, and through CSS selectors","archived":false,"fork":false,"pushed_at":"2021-06-15T12:28:11.000Z","size":153,"stargazers_count":91,"open_issues_count":7,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-15T21:13:27.408Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://webreflection.github.io/regular-elements/test/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebReflection.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-17T17:11:47.000Z","updated_at":"2024-11-03T10:10:08.000Z","dependencies_parsed_at":"2022-09-16T08:00:39.730Z","dependency_job_id":null,"html_url":"https://github.com/WebReflection/regular-elements","commit_stats":null,"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fregular-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fregular-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fregular-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fregular-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebReflection","download_url":"https://codeload.github.com/WebReflection/regular-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225476383,"owners_count":17480215,"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":[],"created_at":"2024-08-04T09:01:39.147Z","updated_at":"2024-11-20T05:30:47.948Z","avatar_url":"https://github.com/WebReflection.png","language":"JavaScript","readme":"# regularElements\n\n- - -\n\n**V1 Breaking Changes**\n\n  * the definition now follows standard naming convention\n  * callbacks are callbacks, not even driven anymore\n  * if present, `observedAttributes` must contain at least one attribute name\n  * browsers older than IE 11 might not work as expected\n  * the minified gzipped size is now *~0.9K*\n\n- - -\n\nEverything I love about Custom Elements made available for any node, and through CSS selectors.\n\nNo Custom Elements, no Shadow DOM, and no polyfills are needed.\n\n```js\n// if loaded as \u003cscript\u003e, it's exposed as global regularElements\nimport {define} from 'regular-elements';\n\ndefine('button.alive', {\n  // lifecycle callbacks\n  connectedCallback() {\n    this.disabled = false;\n    this.classList.add('fade-in');\n  },\n  disconnectedCallback() {\n    console.log('goodbye');\n  },\n\n  // attributes notifications\n  observedAttributes: ['only', 'these', 'attrs'],\n  attributeChangedCallback(attributeName, oldValue, newValue) {\n    console.log(attributeName, oldValue, newValue);\n  }\n});\n\n\ndefine('#any \u003e sel-ector[you=like]', {\n  // ...\n});\n```\n\nThe module exports the same _API_ found in [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry): `define(selector, definition)`, `get(selector)`, `upgrade(node)`, and `whenDefined(selector)`.\n\n\n\n## Best Practices\n\nSince, like it is for Custom Elements, you can define one selector per time,\nit is suggested to not use too generic selectors such `a` or `button` in case you'd like to compose behaviors.\n\nA single node can indeed behave in various way, as long as it matches one or more defined selector.\n\n```js\nregularElements.define('.clicker', {\n  connectedCallback() {\n    this.addEventListener('click', theClicker);\n  }\n});\nregularElements.define('.hi-five', {\n  connectedCallback() {\n    this.textContent += ' 🖐 ';\n  }\n});\n```\n\nWhenever an element with either the class `clicker`, or `hi-five`, or both is created or found live on the DOM, it will be setup once per behavior, as [demoed here](https://webreflection.github.io/regular-elements/test/multi.html).\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWebReflection%2Fregular-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWebReflection%2Fregular-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWebReflection%2Fregular-elements/lists"}