{"id":25020931,"url":"https://github.com/dannymoerkerke/custom-elements-css-loader","last_synced_at":"2026-04-07T08:32:10.275Z","repository":{"id":87977084,"uuid":"172941525","full_name":"DannyMoerkerke/custom-elements-css-loader","owner":"DannyMoerkerke","description":"Webpack loader for Custom Elements CSS","archived":false,"fork":false,"pushed_at":"2019-03-27T15:15:56.000Z","size":14,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-08T12:15:54.834Z","etag":null,"topics":["css","custom-elements","webcomponents","webpack"],"latest_commit_sha":null,"homepage":null,"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/DannyMoerkerke.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":"2019-02-27T15:33:06.000Z","updated_at":"2020-02-24T15:23:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"1acc18ed-6b3d-46e5-b9f6-8683b95fb2ad","html_url":"https://github.com/DannyMoerkerke/custom-elements-css-loader","commit_stats":{"total_commits":12,"total_committers":1,"mean_commits":12.0,"dds":0.0,"last_synced_commit":"1cd250db3614db377684d0a5e62d8a17b5ec6729"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DannyMoerkerke%2Fcustom-elements-css-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DannyMoerkerke%2Fcustom-elements-css-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DannyMoerkerke%2Fcustom-elements-css-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DannyMoerkerke%2Fcustom-elements-css-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DannyMoerkerke","download_url":"https://codeload.github.com/DannyMoerkerke/custom-elements-css-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246304556,"owners_count":20755929,"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":["css","custom-elements","webcomponents","webpack"],"created_at":"2025-02-05T12:18:24.184Z","updated_at":"2026-04-07T08:32:10.214Z","avatar_url":"https://github.com/DannyMoerkerke.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Custom elements CSS loader\n\nThis is a webpack loader which fixes CSS inside Custom Elements Shadow\nDOM for browsers that don't support\n[Custom Elements V1](https://caniuse.com/#feat=custom-elementsv1)\n\nThe creation of Custom Elements (Web Components) can easily be polyfilled\nwith [webcomponentsjs](https://github.com/webcomponents/webcomponentsjs)\nbut to make sure that the CSS inside Shadow DOM\nworks correctly, the Shady CSS polyfill will need to be used which means\nthat the source code will also need some modification.\n\nI found this undesirable so I created a Webpack loader to fix this.\n\nIt basically does two things:\n\nIt prefixes all CSS rules inside the Shadow DOM of your web component\nthat do not start with `::host` or `::slotted` with the tagname of the\nelement to provide proper scoping.\nAfter that it parses all `::host` and `::slotted` rules to make sure\nthese also work correctly.\n\nNote that this loader only works for browsers that do NOT support Shadow\nDOM.\n\n## How to use\nInstall with npm:\n\n`npm install custom-elements-css-loader`\n\nThen add the loader to your webpack config:\n\n```\nmodule.exports = {\n    ...\n\n    module: {\n        rules: [\n            {\n                test: /\\.js$/,\n                use: [\n                    {\n                        loader: 'custom-elements-css-loader'\n                    }\n                ],\n\n            }\n        ]\n    }\n    ...\n\n}\n```\n\n### Testing\nTo run the tests:\n\n`npm test`\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdannymoerkerke%2Fcustom-elements-css-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdannymoerkerke%2Fcustom-elements-css-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdannymoerkerke%2Fcustom-elements-css-loader/lists"}