{"id":39642042,"url":"https://github.com/ylerjen/webcomp-starter-kit","last_synced_at":"2026-01-18T09:01:30.295Z","repository":{"id":43630324,"uuid":"159297922","full_name":"ylerjen/webcomp-starter-kit","owner":"ylerjen","description":"A webcomponent starter kit that contains everything you need to direct code your webcomp and not take 2 days for the setup...","archived":false,"fork":false,"pushed_at":"2022-12-30T03:09:16.000Z","size":566,"stargazers_count":0,"open_issues_count":20,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-03-24T19:42:51.447Z","etag":null,"topics":["custom-elements","shadow-dom","shadowdom","webcomp","webcomponent"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ylerjen.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-27T08:01:21.000Z","updated_at":"2021-04-12T09:09:07.000Z","dependencies_parsed_at":"2023-01-31T10:20:25.788Z","dependency_job_id":null,"html_url":"https://github.com/ylerjen/webcomp-starter-kit","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"purl":"pkg:github/ylerjen/webcomp-starter-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ylerjen%2Fwebcomp-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ylerjen%2Fwebcomp-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ylerjen%2Fwebcomp-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ylerjen%2Fwebcomp-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ylerjen","download_url":"https://codeload.github.com/ylerjen/webcomp-starter-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ylerjen%2Fwebcomp-starter-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28534154,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-elements","shadow-dom","shadowdom","webcomp","webcomponent"],"created_at":"2026-01-18T09:00:57.650Z","updated_at":"2026-01-18T09:01:30.289Z","avatar_url":"https://github.com/ylerjen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webcomp-starter-kit\nA dev-ready bundler and packager to create Web-Components with:\n- ESNext transpiled by Babel\n- HTML templates loaded from *.html file into your JS\n- Sass styles loaded to your JS\n- The spec v1 of ShadowDom and CustomElement\n\n## Disclaimer\nAs [HTML Import](https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports) is still not well implemented in browsers ([and will perhaps never be...](https://hacks.mozilla.org/2015/06/the-state-of-web-components)), this starter kit doesn't use this API. Instead, it's the JavaScript bundle that has to be loaded in the page to manage the WebComp.\nFor the sack of separation of concern, at dev step, we still have the html and the CSS (SCSS) files, but they are loaded in the JS by Webpack.\n\n## Polyfill\nTo be supported crossbrowser, you'll need some polyfills that are commented out by default in the index.html file.\nJust remove the comments to use the polyfill in dev mode.\nIf you need the polyfill for your application, you'll have to insert it manually with your other scripts.\n\n- [ShadyDOM](https://github.com/webcomponents/shadydom) : ShadowDOM V1 shim\n- [document-register-element](https://github.com/WebReflection/document-register-element) : A stand-alone working lightweight version of the W3C Custom Elements specification\n- [custom-elements](https://github.com/webcomponents/custom-elements) : is still a work in progress but will be the official custom-element polyfill\n\nSpecify the extended tagname in the definition of the custom element like\n\n```customElements.define('my-component', MyComponent, {extends: 'input'});```\n\n## Development\n\n### Steps to create your own WebComponent\n1. Clone this repository\n1. Change the git origin repo to your own\n1. Adapt ```package.json``` according to your WebComponent\n1. Rename the class in the ```scripts/component.js```\n1. Adapt the ```CustomElements.define``` in the ```scripts/component.js```\n1. Happy coding\n\n### Extending HTMLElement VS extending specific Elements\nThe default code is oriented for a HTMLElement extension. This the case when you don't need to extend a specific existing component, but just want to create your custom one.\nIn the case you want to extend a specific HTMLElement like HTMLButtonElement, HTMLInputElement,... you'll need to modify the ```scripts/component.js``` with the following changes :\n\n**Select the element to extend**\n\nChange the inherited member to your own like\n\n```export class MyComponent extends HTMLInputElement {```\n\n**Define the extended tagname**\n\nSpecify the extended tagname in the definition of the custom element like\n\n```customElements.define('my-component', MyComponent, {extends: 'input'});```\n\n\n\n### Using third party CSS\nIf you want to add a third party style library like let's say [Twitter Bootstrap](https://getbootstrap.com/), you can do so by using webpack imports.\n\n```@import \"~bootstrap/dist/css/bootstrap\";```\n\nSee this [Webpack documentation](https://github.com/webpack-contrib/sass-loader#imports)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fylerjen%2Fwebcomp-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fylerjen%2Fwebcomp-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fylerjen%2Fwebcomp-starter-kit/lists"}