{"id":15099430,"url":"https://github.com/praetoriani/web-components","last_synced_at":"2026-02-04T03:31:04.498Z","repository":{"id":217379136,"uuid":"743691071","full_name":"praetoriani/web-components","owner":"praetoriani","description":"With this repository I would like to show how easy it is to create your own web components using HTML, Javascript and CSS.","archived":false,"fork":false,"pushed_at":"2024-02-29T17:55:41.000Z","size":1187,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T13:41:34.778Z","etag":null,"topics":["component-library","components","css","framework","html","html5","javascript","javascript-library","justplaincode","libraries","no-frameworks","nobullshit","reusable-components","web-component","web-components","web-development","web-worker"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/praetoriani.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-15T19:23:54.000Z","updated_at":"2024-02-08T19:41:35.000Z","dependencies_parsed_at":"2024-02-29T18:49:52.736Z","dependency_job_id":"928b624f-c9d5-4a90-976c-74ff0479550b","html_url":"https://github.com/praetoriani/web-components","commit_stats":null,"previous_names":["praetoriani/web-components"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/praetoriani/web-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/praetoriani%2Fweb-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/praetoriani%2Fweb-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/praetoriani%2Fweb-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/praetoriani%2Fweb-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/praetoriani","download_url":"https://codeload.github.com/praetoriani/web-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/praetoriani%2Fweb-components/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264284357,"owners_count":23584675,"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":["component-library","components","css","framework","html","html5","javascript","javascript-library","justplaincode","libraries","no-frameworks","nobullshit","reusable-components","web-component","web-components","web-development","web-worker"],"created_at":"2024-09-25T17:20:39.660Z","updated_at":"2026-02-04T03:30:59.473Z","avatar_url":"https://github.com/praetoriani.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Web Components](./assets/Web-Components-Profile-Image.png)\n\n\n![Static Badge](https://img.shields.io/badge/Uses%20HTML5-%23525252?style=plastic\u0026logo=html5\u0026logoColor=%2333bbff\u0026label=%20\u0026labelColor=%23525252\u0026link=https%3A%2F%2Fgithub.com%2Fpraetoriani)\n![Static Badge](https://img.shields.io/badge/Uses%20CSS3-%23525252?style=plastic\u0026logo=css3\u0026logoColor=%2333CC33\u0026label=%20\u0026labelColor=%23525252\u0026link=https%3A%2F%2Fgithub.com%2Fpraetoriani)\n![Static Badge](https://img.shields.io/badge/Uses%20Javascript-%23525252?style=plastic\u0026logo=javascript\u0026logoColor=%23ffd633\u0026label=%20\u0026labelColor=%23525252\u0026link=https%3A%2F%2Fgithub.com%2Fpraetoriani)\n\n\n## Welcome to my Web Component Repo\n\nI'm pleased that you found your way here to this repository.\u003cbr\u003eI've been working a lot on this private project lately and made some changes to this repository as well.\n\u003cbr\u003e\u003cbr\u003e\nThis repository now has its own website (here on Github). I created this website to provide information about web components as well as to show examples of what is possible with web components. There is also a tutorial in which I explain how to create a simple web component.\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## News/Updates\n\nLatest Update: 15.02.2024\u003cbr\u003e\nIn the last few days I have revised the tooltip popup and published a new version. Information about this can be found in the release information. There is also another new web component. The modal window. This is a further development of the Simple Popup. The modal window offers more setting options and can be configured in almost all ways.\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Informations about the website:**\n![Website Requirements](./assets/website-requirements.png)\n\u003cbr\u003e\u003cbr\u003e\nI optimized my website for Google Chome and Microsoft Edge (these browsers have the largest market share).\u003cbr\u003e\nI tested the website with the following browsers:\n\u003cbr\u003e\u003cbr\u003e\n\u003cstrong\u003eChrome\u003c/strong\u003e (Version 121.0.6167.140 ) \u003cbr\u003e\n\u003cstrong\u003eEdge\u003c/strong\u003e (Version 121.0.2277.98) \u003cbr\u003e\n\u003cstrong\u003eOpera One\u003c/strong\u003e (Version 106.0.4998.70) \u003cbr\u003e\n\u003cstrong\u003eFirefox\u003c/strong\u003e (Version 122.0) \u003cbr\u003e\n\u003cbr\u003e\nThe website works perfectly on all chromium-based browsers (with Blink Browser Engine).\u003cbr\u003e\nThis applies to the following browsers:\u003cbr\u003e\n\u003cstrong\u003eChrome\u003c/strong\u003e , \u003cstrong\u003eEdge\u003c/strong\u003e , \u003cstrong\u003eOpera\u003c/strong\u003e , \u003cstrong\u003eVivaldi\u003c/strong\u003e , \u003cstrong\u003eBrave\u003c/strong\u003e , \u003cstrong\u003eBomite\u003c/strong\u003e\n\u003cbr\u003e\u003cbr\u003e\n\u003cstrong\u003ePlease note\u003c/strong\u003e\n\u003cbr\u003e\nCurrently the website is not optimized for mobile devices. The website can be viewed on mobile devices, but it might be that you'll notice some issues with the layout of the website. \nAt the moment the website does not yet fully support Firefox. You might recognize some small design issues.\n\u003cbr\u003e\u003cbr\u003e\nYou can find the website here:\u003cbr\u003e\nhttps://praetoriani.github.io/web-components/\n\u003cbr\u003e\nI don't want to say too much in advance... but the website starts with an intro animation.\u003cbr\u003e\u003cbr\u003eIf you would prefer to go directly to the homepage of the website, simply use the following link:\u003cbr\u003e\nhttps://praetoriani.github.io/web-components/landingpage.html\n\u003cbr\u003e\u003cbr\u003e\n\n## A guide to this repo\n\nLet me give you a short guide on how this repo is structured and how I organzied everything:\n\n\u003cimg src=\"./assets/directory.svg\" width=\"16px\"\u003e **assets**\u003cbr\u003e\nHere are just various images that I use in the readme pages.\n\u003cbr\u003e\u003cbr\u003e\n\u003cimg src=\"./assets/directory.svg\" width=\"16px\"\u003e **development**\u003cbr\u003e\nThis folder contains all the web components that I have designed so far. So for each web component there is a separate subfolder with the complete source code (including application example). Each web component comes with its own readme (I recommend reading this one). All web components in this folder are not officially released and should therefore only be used for testing and development processes.\n\u003cbr\u003e\u003cbr\u003e\n\u003cimg src=\"./assets/directory.svg\" width=\"16px\"\u003e **docs**\u003cbr\u003e\nThis directory is exclusively for the repository website.\u003cbr\u003eAll important and relevant data for the website is stored here.\n\u003cbr\u003e\u003cbr\u003e\n\u003cimg src=\"./assets/directory.svg\" width=\"16px\"\u003e **releases**\u003cbr\u003e\nHere you can find the officially released web components. There is a \u003ccode\u003eREADME.MD\u003c/code\u003e inside the \u003cb\u003ereleases\u003c/b\u003e folder ,which contains informations about the current (latest) releases. Each web component has its own subfolder inside the \u003cb\u003ereleases\u003c/b\u003e folder, which contain all published versions of the web components (as a ZIP archive). The structure will look like this:\n\u003cbr\u003e\u003cbr\u003e\n\u003cimg src=\"./assets/directory.svg\" width=\"16px\"\u003e releases\u003cbr\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003cimg src=\"./assets/directory.svg\" width=\"16px\"\u003e demo-component\u003cbr\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;demo-component-v1.00.01.zip\u003cbr\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;demo-component-v1.00.02.zip\u003cbr\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003cimg src=\"./assets/directory.svg\" width=\"16px\"\u003e sample-component\u003cbr\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;sample-component-v1.00.01.zip\u003cbr\u003e\n\u003cbr\u003e\n\n## Important information about the releases\nFirst of all: This whole repo is a private project in which I have invested a lot of time (especially recently). I developed every single web component in my free time and make them available here (under the MIT license).\n\u003cbr\u003e\u003cbr\u003e\nWhen developing the web components, I did my best to offer the most flexible and error-free solution possible. But unfortunately I cannot guarantee that all of my code will work without errors on all browsers and under all circumstances. Therefore, I try to cover the largest market share. And this is on chromium-based browsers.\n\u003cbr\u003e\u003cbr\u003e\nMy web components consist of HTML, CSS and Javascript. The code is optimized for all chromium-based browsers that use the Blink Browser Engine. This applies to the current versions of the following browsers:\u003cbr\u003e\n\u003cstrong\u003eChrome\u003c/strong\u003e , \u003cstrong\u003eEdge\u003c/strong\u003e , \u003cstrong\u003eOpera\u003c/strong\u003e , \u003cstrong\u003eVivaldi\u003c/strong\u003e , \u003cstrong\u003eBrave\u003c/strong\u003e , \u003cstrong\u003eBomite\u003c/strong\u003e\n\u003cbr\u003e\u003cbr\u003e\nBefore I deploy and publish my components, I test them at least with Google Chrome and Microsoft Edge. Unfortunately, due to lack of time, I haven't gotten around to supporting other browsers (browser engines) yet. But I'm working on ensuring that every web component runs on as many browsers as possible. The plan is to create an overview showing which web component supports which browser. There is no complete overview yet, but you can find some informations about compatibility in the \u003ccode\u003eREADME.md\u003c/code\u003e in the release folder.\n\u003cbr\u003e\u003cbr\u003e\nIf you want to use my web components, you should remember that I have only developed, tested and released them for chromium-based browser engines.\n\u003cbr\u003e\u003cbr\u003e\nYou can find more informations about the releases and their compatibility in the \u003ccode\u003eREADME.md\u003c/code\u003e in the releases folder\n\u003cbr\u003e\u003cbr\u003e\n\n## Why isn't Apple/Safari mentioned?\nI work with Windows. Apple stopped supporting Safari on Windows back in 2012. The latest version available is Safari 5.1.7. So pretty outdated. Unfortunately, I haven't yet found a satisfying solution to test the website/components for compatibility with Apple/Safari (and the Webkit browser engine). So all I can currently say is that the website/components probably almost certainly work with Safari. But I cannot guarantee that everything will behave as it should.\n\u003cbr\u003e\u003cbr\u003e\nThere is also a requirement from Apple that all browsers under iOS must also use the Webkit browser engine. This means that both, my website and the web components I developed may produce completely different results under iOS with Chrome/Edge/Firefox than it would be the case under Windows.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpraetoriani%2Fweb-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpraetoriani%2Fweb-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpraetoriani%2Fweb-components/lists"}