{"id":15462910,"url":"https://github.com/bahrus/litter-g","last_synced_at":"2026-01-21T17:03:01.941Z","repository":{"id":50816331,"uuid":"146950142","full_name":"bahrus/litter-g","owner":"bahrus","description":"Use lit-html inside an html element","archived":false,"fork":false,"pushed_at":"2021-05-28T20:44:00.000Z","size":449,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"baseline","last_synced_at":"2025-11-04T16:21:34.984Z","etag":null,"topics":["customelement","customelements","lit-html","webcomponent","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/bahrus.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-08-31T23:12:32.000Z","updated_at":"2020-12-11T00:48:58.000Z","dependencies_parsed_at":"2022-08-26T10:40:24.989Z","dependency_job_id":null,"html_url":"https://github.com/bahrus/litter-g","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bahrus/litter-g","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahrus%2Flitter-g","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahrus%2Flitter-g/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahrus%2Flitter-g/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahrus%2Flitter-g/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bahrus","download_url":"https://codeload.github.com/bahrus/litter-g/tar.gz/refs/heads/baseline","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahrus%2Flitter-g/sbom","scorecard":{"id":223682,"data":{"date":"2025-08-11","repo":{"name":"github.com/bahrus/litter-g","commit":"015cb861fd56ae37ef69bed904f0176dad13739a"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.5,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Code-Review","score":0,"reason":"Found 0/28 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/CI.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/bahrus/litter-g/CI.yml/baseline?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/CI.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/bahrus/litter-g/CI.yml/baseline?enable=pin","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/CI.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'baseline'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 2 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"12 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx","Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-17T03:10:38.873Z","repository_id":50816331,"created_at":"2025-08-17T03:10:38.873Z","updated_at":"2025-08-17T03:10:38.873Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28636658,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T15:01:31.228Z","status":"ssl_error","status_checked_at":"2026-01-21T14:42:58.942Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["customelement","customelements","lit-html","webcomponent","webcomponents"],"created_at":"2024-10-02T00:05:57.515Z","updated_at":"2026-01-21T17:03:01.920Z","avatar_url":"https://github.com/bahrus.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/litter-g)\n\n\u003ca href=\"https://nodei.co/npm/litter-g/\"\u003e\u003cimg src=\"https://nodei.co/npm/litter-g.png\"\u003e\u003c/a\u003e\n\n[![Actions Status](https://github.com/bahrus/p-et-alia/workflows/CI/badge.svg)](https://github.com/bahrus/p-et-alia/actions?query=workflow%3ACI)\n\n\n\u003cimg src=\"https://badgen.net/bundlephobia/minzip/litter-g\"\u003e\n\n# litter-g\n\n## Use Case\n\nThe use case for litter-g is spelled out quite nicely by [React's introductory pages](https://reactjs.org/docs/add-react-to-a-website.html):\n\n\u003eThe majority of websites aren’t, and don’t need to be, single-page apps. With a few lines of code and no build tooling, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.\n\nIn one of their [examples](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html) they show how you can use React inside a script tag.  litter-g does something similar, but with lit-html.\n\nNote:  litter-g hopes to improve on the ergonomics of a similar component, [xtal-method](https://www.webcomponents.org/element/xtal-method).  Both components are meant for applications that aren't necessarily built on a JavaScript-centric paradigm.  Applications that may be built using a server-centric framework, which just wants to strategically shake some JavaScript pixie dust as needed.  Or maybe applications that are built using some \"old\" framework like Cold Fusion, but want to slowly convert into something more modern. \n\n## Syntax\n\nThe litter-g element applies its services onto the next sibling element:\n\n\n```html\n\u003clitter-g id=pronounList\u003e\u003c/litter-g\u003e\n\u003cul\u003e\n    \u003cscript nomodule\u003ehtml`${input.map(i =\u003e html`\u003cli\u003e${i}\u003c/li\u003e`)}`\u003c/script\u003e\n\u003c/ul\u003e\n...\n\u003cscript\u003e\n    pronounList.input = [\"He\", \"She\", \"They\", \"Other\"];\n\u003c/script\u003e\n```\n\nHere, we are relying on the fact that giving a DOM element an id (\"pronounList\"), that id becomes a global constant, if the DOM element is outside ShadowDOM.\n\nYou can also specify the input via a JSON attribute:\n\n```html\n\u003clitter-g input='[\"He\", \"She\", \"They\", \"Other\"]'\u003e\u003c/litter-g\u003e\n\u003cul\u003e\n    \u003cscript nomodule\u003e\n        html`${input.map(i =\u003e html`\u003cli\u003e${i}\u003c/li\u003e`)}`\n    \u003c/script\u003e\n\u003c/ul\u003e\n```\n\nThe snippet of lit syntax contained within the script child becomes the innerHTML renderer, and it re-renders anytime the input property changes. \n\n\n\n## [Demo](https://jsfiddle.net/bahrus/ma2y8ev0/6/)\n\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cul  data-input='[\"He\", \"She\", \"They\", \"Other\"]'\u003e\n                \u003cscript nomodule data-lit\u003e\n                    html`${_input.map((i) =\u003e html`\u003cli\u003e${i}\u003c/li\u003e`)}`\n                \u003c/script\u003e\n        \u003c/ul\u003e\n\n        \u003clabel\u003e\n            Latitude:\n            \u003cinput aria-placeholder=Latitude placeholder=Latitude value=41.903878\u003e\n            \u003c!-- pass down (p-d) input value to _latitude property of div--\u003e\n            \u003cp-d on=input to=[-_latitude] from=label  m=1\u003e\u003c/p-d\u003e\n        \u003c/label\u003e\n        \n        \n\n        \u003clabel\u003e\n            Longitude:\n            \u003cinput aria-placeholder=Longitude placholder=Longitude value=12.452818\u003e\n            \u003c!-- pass down (p-d) input value to _longitude property of div#long_lat --\u003e\n            \u003cp-d on=input to=[-_longitude] from=label m=1\u003e\u003c/p-d\u003e\n        \u003c/label\u003e\n\n        \n        \u003cdiv -_latitude -_longitude \u003e\n            \u003cscript nomodule data-lit\u003e\n                tr = ({_latitude, _longitude}) =\u003e html`\n                    \u003ca href=\"http://www.gps-coordinates.org/my-location.php?lat=${_latitude}\u0026lng=${_longitude}\" target=\"_blank\"\u003e\n                        (${_latitude},${_longitude})\n                    \u003c/a\u003e \n                `;\n            \u003c/script\u003e\n        \u003c/div\u003e\n\n\n        \u003cstyle\u003e\n            .fieldInput{\n                display:flex;\n                flex-direction: row;\n            }\n            label{\n                display:flex;\n                flex-direction:row;\n            }\n        \u003c/style\u003e\n        \u003cscript type=\"module\" src=\"https://unpkg.com/litter-g@0.0.33/litter-g.js?module\"\u003e\u003c/script\u003e\n        \u003cscript type=\"module\" src=\"https://unpkg.com/p-et-alia@0.0.73/p-d.js?module\"\u003e\u003c/script\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n\n## Directives\n\nAll the lit-html directives that are part of the lit-html library are available for use.\n\n## Event Handling\n\nIt's a bit \"hackish\", but you can add event handlers, if you are careful to demark where the event handlers end, and the template begins, via the \"magic string\" //render:\n\n```html\n\u003clitter-g input='[\"He\", \"She\", \"They\", \"Other\"]'\u003e\u003c/litter-g\u003e\n\u003cul id=\"pronouns\"\u003e\n    \u003cscript nomodule\u003e\n        function clickHandler(e){\n            console.log(e);\n        }\n        //render\n        html`${input.map((item, idx) =\u003e html`\u003cli @click=\"${clickHandler}\" id=\"li_${idx}\"\u003e${item}\u003c/li\u003e`)}`\n    \u003c/script\u003e\n\u003c/ul\u003e\n```\n\n## Multivariable Functions\n\nSometimes we want a ui element to depend on more than one input parameter.  \n\n```html\n...\n\u003clitter-g id=mapCoordinates\u003e\u003c/litter-g\u003e\n\u003cdiv\u003e\n    \u003cscript nomodule\u003e\n        tr = ({latitude, longitude}) =\u003e html`\n            \u003ca href=\"http://www.gps-coordinates.org/my-location.php?lat=${latitude}\u0026lng=${longitude}\" target=\"_blank\"\u003e\n                (${latitude},${longitude})\n            \u003c/a\u003e \n        `\n    \u003c/script\u003e\n\u003c/div\u003e\n```\n\nand does the following:\n\n1)  Dynamically adds properties latitude, longitude to the litter-g instance.   \n2)  Updates the input property any time either of those properties change (with a little debouncing [TODO](https://dev.to/thepassle/litelement-a-deepdive-into-batched-updates-3hh)), thus causing lit-html to re-render.\n\n\n**NB I:** The \"tr = \" is optional text.  This allows VSCode to recognize the expression, and provide helpful syntax coloring, autocomplete, etc.  tr stands for \"template result.\"\n\nYou can also add event handlers just as before, separated by the //render comment.\n\n\n\n##   [IE11 Support](https://youtu.be/YVi6ZYzD_Gc?t=275) \n\n## Viewing Your Element\n\n```\n$ npm install\n$ npm run serve\n```\n\n## Running Tests\n\n$ npm run test\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahrus%2Flitter-g","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbahrus%2Flitter-g","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahrus%2Flitter-g/lists"}