{"id":18358893,"url":"https://github.com/uppercod/element","last_synced_at":"2026-05-06T00:37:00.147Z","repository":{"id":113250954,"uuid":"176882893","full_name":"UpperCod/element","owner":"UpperCod","description":"It allows to join @atomico/core to web-components in a simple and expressive way","archived":false,"fork":false,"pushed_at":"2019-05-16T03:32:18.000Z","size":346,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-23T22:26:58.450Z","etag":null,"topics":["jsx","web-components"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/atomico-element-function","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/UpperCod.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-21T06:24:43.000Z","updated_at":"2020-01-20T03:27:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"6ee773da-6ac6-43ea-9a6e-8e05a190e141","html_url":"https://github.com/UpperCod/element","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Felement","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Felement/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Felement/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Felement/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UpperCod","download_url":"https://codeload.github.com/UpperCod/element/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239036206,"owners_count":19571462,"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":["jsx","web-components"],"created_at":"2024-11-05T22:19:50.662Z","updated_at":"2025-10-16T23:07:43.451Z","avatar_url":"https://github.com/UpperCod.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## @atomico/element\n\nIt allows to join [@atomico/core](https://github.com/atomicojs/core) to web-components in a simple and expressive way\n\n## What is Atomico?\n\nAtomico is a [personal](https://github.com/uppercod) Open Source project, whose mission is to simplify the creation of sustainable and scalable interfaces with minimal impact on browser resources.\n\n## From React to web-component\n\nDo not forget that these libraries are similar in api, but Atomico's orientation is to encourage the use of web-components with or without Atomico, since web-components are agnostic to framework or libraries.\n\n![full](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1557340605/github/atomico-element/full.png)\n\n### Import differences\n\n![import](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1557340605/github/atomico-element/import.png)\n\nyou will need 2 imports, [@atomico/element](https://github.com/atomicojs/element) this allows you to work with web-components and [@atomico/core](https://github.com/atomicojs/core) that has support for hooks, context, HoCs, virtual-dom and more.\n\n### Component to web-component\n\n![component](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1557340605/github/atomico-element/component.png)\n\n**Atomico allows both syntax**, so you can use components and web-components together, but now we focus on the creation of web-components\n\n### Fragment to host\n\nAtomico does not have support for fragments, but to improve the development experience Atomico creates the tag `\u003chost\u003e`, this has an effect similar to the css selector `:host{}`\n\nThe `\u003chost\u003e` tag brings better benefits, since it allows to manipulate properties and attributes of the web-component from the same JSX, the following image shows the difference between a vanilla web-component and the atomic host tag, to understand its benefit and equivalence.\n\n![host](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1557340605/github/atomico-element/host.png)\n\n### Render to customElement\n\n![render](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1557340605/github/atomico-element/render.png)\n\nrender allows to point the component to a specific node of the document, customElement allows associating its function to a web-component, so you should only invoke the web-component from the HTML, React or Vue, without worrying about specifying the node.\n\n## definition of observables\n\nThe above shows the similar, the `observables` are the Atomico layer to define properties and attributes of the web-component, to identify the types and force them if they come from a `string` Atomico makes use of the declarations like `Number`, `String`,`Boolean`, `Object`, `Array`, `Function` and `Promise`, to define the types of properties and attributes.\n\n![observables](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1557340605/github/atomico-element/observables.png)\n\nevery attribute is defined as property so you can use `document.querySelector(\"my-wc\").value = \"new value\"` for its definition.\n\nObservables are not limited to just one property you can create more complex sets.\n\n```js\nMyWc.observables = {\n\tisChecked: Boolean, //html: \u003cmy-wc is-checked/\u003e\n\tvalue: String, //html: \u003cmy-wc value='....'/\u003e\n\tid: Number, //html: \u003cmy-wc id='10'/\u003e\n\tdata: Object //html: \u003cmy-wc data='{\"name\":\"atomico\"}'/\u003e\n};\n```\n\n## Web-component as a class\n\nThe functional behavior is to simplify the expressiveness of a web-component, but the real api is a class, you can make use of this, the greatest benefit of using classes that the events maintain the context of `this` without the need to use `bind`\n\n```jsx\nimport { h, Element } from \"@atomico/element\";\n\nclass ShowEmoji extends Element {\n\tstatic observables = {\n\t\tchecked: Boolean\n\t};\n\ttoggle() {\n\t\tthis.checked = !this.checked;\n\t}\n\trender({ checked = false }) {\n\t\treturn (\n\t\t\t\u003chost shadowDom\u003e\n\t\t\t\t{checked \u0026\u0026 \"😃\"}\n\t\t\t\t\u003cbutton onClick={this.toggle}\u003etoggle emoji\u003c/button\u003e\n\t\t\t\u003c/host\u003e\n\t\t);\n\t}\n}\n```\n\n\u003e The hooks can also be used within render.\n\n## Example\n\n### Simple shop\n\nThis small example was created by using `npm init @atomico`, it is a source for learning to develop PWA applications with Atomico.\n\n[![simple shop](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1557340605/github/atomico-element/simple-shop.png)](https://atomicojs.github.io/examples/atomico-store/public/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuppercod%2Felement","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuppercod%2Felement","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuppercod%2Felement/lists"}