{"id":14962685,"url":"https://github.com/singhtal/svelte-webcomponents","last_synced_at":"2025-10-25T00:30:40.486Z","repository":{"id":41962808,"uuid":"367084029","full_name":"singhtal/svelte-webcomponents","owner":"singhtal","description":"A ready-to-use project template to build custom elements (web components) with Svelte 3 with support and examples for web components, jest, sass, nested components with props, eslinting, stylelinting, Github actions, propagating custom events from shadow-DOM to real-DOM etc.","archived":false,"fork":false,"pushed_at":"2022-10-20T16:37:47.000Z","size":297,"stargazers_count":30,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-09-29T12:02:40.782Z","etag":null,"topics":["custom-elements","javascript","open-source","shadow-dom","svelte","svelte3","sveltejs","web-component","web-components"],"latest_commit_sha":null,"homepage":"","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/singhtal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-13T15:00:45.000Z","updated_at":"2023-06-22T20:18:52.000Z","dependencies_parsed_at":"2023-01-20T02:18:35.490Z","dependency_job_id":null,"html_url":"https://github.com/singhtal/svelte-webcomponents","commit_stats":null,"previous_names":["tal1992/svelte-webcomponents"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/singhtal%2Fsvelte-webcomponents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/singhtal%2Fsvelte-webcomponents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/singhtal%2Fsvelte-webcomponents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/singhtal%2Fsvelte-webcomponents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/singhtal","download_url":"https://codeload.github.com/singhtal/svelte-webcomponents/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219867387,"owners_count":16555891,"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":["custom-elements","javascript","open-source","shadow-dom","svelte","svelte3","sveltejs","web-component","web-components"],"created_at":"2024-09-24T13:30:22.280Z","updated_at":"2025-10-25T00:30:40.114Z","avatar_url":"https://github.com/singhtal.png","language":"JavaScript","readme":"\u003cdiv\u003e\n  \u003cimg src=\"https://pbs.twimg.com/profile_images/1121395911849062400/7exmJEg4.png\" alt=\"svelte logo\" width=\"100px\"/\u003e\n\u003c/div\u003e\n\n\n\u003ch1  style=\"border: 0; margin: 5px;\"\u003esvelte-webcomponents\u003c/h1\u003e\n\n[![Website](https://img.shields.io/website/https/layer5.io/meshery.svg)](https://xenodochial-lumiere-4883d3.netlify.app/)\n[![v1.0.0](https://img.shields.io/badge/version-v1.0.0-yellow.svg?style=flat\u0026logo=)](https://github.com/tal1992/svelte-webcomponents)  [![License: MIT](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat\u0026logo=license)](https://github.com/tal1992/svelte-webcomponents/blob/main/LICENSE) [![Powered By Svelte](https://img.shields.io/badge/powered%20by-svelte-FF3C02.svg?style=flat\u0026logo=svelte)](https://svelte.dev/) [![Language: Javascript](https://img.shields.io/badge/language-javascript-blue.svg?style=flat\u0026logo=javascript)](https://www.javascript.com) \u003ca href=\"https://twitter.com/intent/tweet?text=A ready to use project template to build custom elements (web components) with Svelte 3 with support and examples for custom-elements, jest, sass, nested components with props, eslinting, stylelinting, propagating custom events to read-DOM etc. https://github.com/tal1992/svelte-webcomponents\"\u003e\u003cimg src=\"http://randojs.com/images/tweetShield.svg\" alt=\"Tweet\" height=\"20\"/\u003e\u003c/a\u003e\n\n\u003ch5\u003e\u003cp\u003e\u003ci\u003e\u003cu\u003eIf you’re using web-components or if you like the project, please \u003ca href=\"https://github.com/tal1992/svelte-webcomponents/stargazers\"\u003e★\u003c/a\u003e this repository to show your support!\u003c/u\u003e 🤩\u003c/i\u003e\u003c/p\u003e\u003c/h5\u003e\n\n\u003cp\u003eThe world's most easiest, ready to use template for web-components.\u003c/p\u003e\n\n## About 📚\nA ready to use project template to build custom elements (web components) with Svelte 3 with support and examples for web components, jest, sass, nested components with props, eslinting, stylelinting, Github actions and custom events from shadow-DOM to real-DOM etc.\n\n## Installation 🚀\n\nRun below command inside the working folder\n\n```bash\n$ git clone https://github.com/tal1992/svelte-webcomponents.git\n** or **\n$ npx degit tal1992/svelte-webcomponents\n\n\n```\n## Installation and build 📌\n\n```bash\n📦 $ npm install \n\n🔨 developer mode -\u003e $ npm run dev\n🔨  production mode -\u003e $ npm run build\n```\n\n## Using web-components in HTML 📌\n\n```html\n  \u003ccomponent-name propOne=\"Lorem\" propTwo=\"Ipsum\"\u003e\u003c/component-name\u003e\n```\n\n## Using web-components as a widget 📌\n\n```javascript\nfunction addScript(src) {\n  var s = document.createElement(\"script\");\n  s.setAttribute(\"src\", src);\n  document.querySelector(\"body\").appendChild(s);\n}\n//replace the url with your hosted path of bundle.js\naddScript(\"https://loremipsumdolarsir/build/bundle.js\", \"\", \"\");\n```\n\nNow that your bundle.js file is included in the html , we can use the web components.\n\n```javascript\n      let foo = document.createElement('component-foo');\n      let header = document.getElementByTagName('header');\n      foo.setAttribute('propOne', \"lorem\");\n      foo.setAttribute('propTwo', \"Ipsum\");\n      // please replace header with the element where you want to add your custom element.\n      header.parentNode.replaceChild(foo, header);\n```\n\n## Nested Custom Elements 📌\n\n#### Register your custom-element inside App.svelte\n\n##### App.svelte\n```javascript\n import foo from './foo.svelte';\n import bar from './bar.svelte';\n```\n\n#### No need to import the custom element inside parent declared component, use custom tag names while nesting.\n\n##### Parent.svelte\n```svelte\n\u003csvelte:options tag=\"component-parent\"\u003e\u003c/svelte:options\u003e\n\n\u003cdiv class=\"parent\"\u003e\n    \u003ccomponent-foo name=\"John\" background=\"orange\"\u003e\u003c/component-foo\u003e\n    \u003ccomponent-bar name=\"Doe\" background=\"lightgreen\"\u003e\u003c/component-bar\u003e\n\u003c/div\u003e\n\n```\n\n## Writing SCSS inside svelte 📌\n\n#### This template comes with in-built support for scss.\n\n##### foo.svelte\n```svelte\n\u003cstyle lang=\"scss\"\u003e\n    h2 {\n        padding: 20px;\n    }\n\u003c/style\u003e\n```\n\n## Test cases 📌\nWrite test cases inside __tests __ folder\n\nNote : Dont treat webcomponents as a special case for testing, they should be tested as normal svelte components.\n\n```javascript\nimport { render } from \"@testing-library/svelte\";\nimport App from \"../src/App.svelte\";\n\ndescribe(\"App component\", () =\u003e {\n  test(\"should render component correctly\", () =\u003e {\n    const { container } = render(App);\n\n    expect(container).toContainHTML(\"\u003cbody\u003e\u003cdiv\u003e\u003ch1\u003eHello from svelte\u003c/h1\u003e\u003c/div\u003e\u003c/body\u003e\");\n  });\n});\n```\n\nUse normal component name and not the webcomponent name in the test case.\n\n```bash\n$ npm run test\n```\n\n## ESLINT 📌\n\n\n```bash\n$ npm run lintjs\n```\n\n## Style lint 📌\n\n\n```bash\n$ npm run lintcss\n```\n\n### Event propagation from Shadow DOM to Real DOM 📌\n\nFoo.svelte (web component)\n```svelte\n\u003cscript\u003e\n    import { get_current_component } from \"svelte/internal\";\n    const thisComponent = get_current_component();\n\n    const dispatchEvent = (name, detail) =\u003e {\n        thisComponent.dispatchEvent(new CustomEvent(name, {\n        detail,\n        composed: true, // propagate to the Real DOM, handled in index.html\n        }));\n    };\n\n    function handleClick(event) {\n       event.preventDefault();\n       dispatchEvent(\"customclick\", name)\n    }    \n\u003c/script\u003e\n\n\u003csvelte:options tag=\"component-foo\"\u003e\u003c/svelte:options\u003e\n\n\u003cbutton on:click={event =\u003e handleClick(event)}\u003eClick me\u003c/button\u003e\n\n```\n\nInside Real DOM\n\n```html\n\u003cscript\u003e\n\twindow.onload = function () {\n\t  let myelem = document.querySelectorAll('component-foo');\n\n\t  myelem.forEach(function (elem) {\n\t    elem.addEventListener('customclick', (e) =\u003e {\n\t      alert(e.detail + ' clicked');\n\t    });\n\t  });\n\t};\n\u003c/script\u003e\n```\n## Developer\n[Linkedin](https://www.linkedin.com/in/iamtalvinder/)\n[Twitter](https://twitter.com/iamtalvinder)\n[Email](mailto:talvindersingh1992@gmail.com)\n## License\n[MIT](https://choosealicense.com/licenses/mit/)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinghtal%2Fsvelte-webcomponents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsinghtal%2Fsvelte-webcomponents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinghtal%2Fsvelte-webcomponents/lists"}