{"id":20358261,"url":"https://github.com/node-projects/base-custom-webcomponent","last_synced_at":"2026-03-05T16:03:04.489Z","repository":{"id":46370465,"uuid":"272441301","full_name":"node-projects/base-custom-webcomponent","owner":"node-projects","description":"a basic simple custom webcomponent class","archived":false,"fork":false,"pushed_at":"2026-02-05T08:06:27.000Z","size":341,"stargazers_count":9,"open_issues_count":6,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2026-02-05T19:54:53.536Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/node-projects.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"jogibear9988","patreon":"jogibear9988"}},"created_at":"2020-06-15T13:06:06.000Z","updated_at":"2026-02-05T08:06:31.000Z","dependencies_parsed_at":"2024-03-07T14:02:18.063Z","dependency_job_id":"ad2f3ecf-f002-438f-895b-2483e4493117","html_url":"https://github.com/node-projects/base-custom-webcomponent","commit_stats":{"total_commits":127,"total_committers":7,"mean_commits":"18.142857142857142","dds":0.4330708661417323,"last_synced_commit":"bf34f501533dd39794063b891f6c5223d33d07e9"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/node-projects/base-custom-webcomponent","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-projects%2Fbase-custom-webcomponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-projects%2Fbase-custom-webcomponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-projects%2Fbase-custom-webcomponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-projects%2Fbase-custom-webcomponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/node-projects","download_url":"https://codeload.github.com/node-projects/base-custom-webcomponent/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-projects%2Fbase-custom-webcomponent/sbom","scorecard":{"id":692113,"data":{"date":"2025-08-11","repo":{"name":"github.com/node-projects/base-custom-webcomponent","commit":"f4da5734ceee76603f15e940ac5255dce1c3c5f6"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","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":"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":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"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":"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":"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":"Code-Review","score":0,"reason":"Found 0/30 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":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"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":"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":"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: BSD 3-Clause \"New\" or \"Revised\" 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 'master'"],"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":"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":"Vulnerabilities","score":2,"reason":"8 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-28mc-g557-92m7","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-593f-38f6-jp5m","Warn: Project is vulnerable to: GHSA-x2rg-q646-7m2v","Warn: Project is vulnerable to: GHSA-jgmv-j7ww-jx2x","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","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-22T02:32:11.649Z","repository_id":46370465,"created_at":"2025-08-22T02:32:11.649Z","updated_at":"2025-08-22T02:32:11.649Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30134574,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T15:35:27.018Z","status":"ssl_error","status_checked_at":"2026-03-05T15:35:23.768Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":[],"created_at":"2024-11-14T23:26:10.084Z","updated_at":"2026-03-05T16:03:04.478Z","avatar_url":"https://github.com/node-projects.png","language":"TypeScript","funding_links":["https://github.com/sponsors/jogibear9988","https://patreon.com/jogibear9988"],"categories":[],"sub_categories":[],"readme":"# base-custom-webcomponent\r\n\r\n## Description\r\n\r\nThe base-custom-webcomponent is a simple base class for the use of webcomponents in typescript. It wraps the needed basic functionality and also allows you to optionally use some advanced technics like\r\n- set attribute into property \r\n- two-way binding\r\n\r\n## Basic Feature\r\nThe base class does:\r\n- registers the html tag\r\n- creates the shadow dom\r\n- imports the css and html into the shadow dom\r\n- gives access to the dom elements with helping functions\r\n- informs about startup \r\n  - oneTimeSetup()\r\n  - ready()\r\n\r\n## Planed features\r\n\r\nAutomatic Change Notification class fields via decorators are planed, but lack browser support at the moment: https://github.com/lit/lit/issues/2284\r\nFor now we removed the this._createObservableProperties(); cause it would not work if you compile to newer javascript.\r\n\r\nRefresh Bindings - only for the changed value.\r\nAt the moment the call refreshes all bindings, but this could (and should) be optimized.\r\n\r\n## Advanced Features\r\n\r\nAll the features are not enabled by default for performance reasons but you can call these methods to enable them. \r\n - this._restoreCachedInititalValues(); ==\u003e Needs to be called after super() of the constructor, to restore properties set, before element is upgraded. And also it needs to be called after the default values are set in constructor.\r\n - this._parseAttributesToProperties(); ==\u003e parses all attributes to the defined properties\r\n - this._assignEvents(); ==\u003e parses @event bindings to callbacks in class\r\n - this._bindingsParse(); ==\u003e parses and enables bindings\r\n - this._bindingsrefresh(); ==\u003e Updates Bindings after change of bound Values\r\n\r\n## Hot Reload\r\n\r\nThe Library supports Hotreload of Components created with it. This works mostly for the Templates and the Styles, for Javascript, it depends. Best is, if you try it yourself.\r\n\r\nTo use it, try following snippet:\r\n\r\n```\r\nHotModuleReplacement.initHMR(async () =\u003e {\r\n    ...\r\n    replace this with a function wich returns a list of your changed files, \r\n    or null if no files have changed since the last call, this function will be called every 100ms\r\n    so this function for example could ask the dev server wich files have changed, and return them.\r\n    The hotmodulereplacment will then try to reload them (If possible)\r\n    ...\r\n});\r\n```\r\n\r\n## Bindings\r\n\r\nThe Bindings are heavily inspired by polymer\r\n\r\nuse [[expression]] for one way bindings\r\n\r\nuse {{this.property::change;paste}} for two way bindings which listens to events 'change 'and 'paste'\r\n\r\nbcw:visible=\"[[bool-expression]]\" to bind set css visiblity to visible when expression is true\r\n\r\ncss:cssPropertyName=\"[[expression]]\" to bind to a css property\r\n\r\nclass:className=\"[[boolExpression]]\" to set/remove a css class\r\n\r\n$attribute=\"[[expression]]\" to bind to Attributes instead of properties.\r\n\r\n?booleanAttribute=\"[[expression]]\" to bind to a boolean Attribute.\r\n\r\n.property=\"[[expression]]\" to bind to Proertys without using the attribute name (to disable side effects).\r\n\r\n[[$this.aa]] insert a property as parsed node. (the $ at the start)\r\n\r\nsub \u003ctemplate\u003e\u003c/template\u003e elements are not bound, so elements like \u003ciron-list\u003e of polymer also work\r\n\r\ncss type adopted-css\r\n\r\nuse repeat:nameOfItem=\"[[enumerableExpression]]\" on a template element to repeat it for every instance of the enumerable.\r\nYou could also use 'index' variable in the repeat binding for the current number. The attribute \"repeat-index\" could be used to change the name of the index variable.\r\non a repeat you could use the repeat-changed-item-callback=\"[[this.itemCreated(item, nodes)]]\r\n!!caution!! =\u003e the repeat binding is only a preview at the moment, it redraws all items on array change\r\n\r\nuse if=\"[[expression]]\" an a template element to show it conditionally\r\n\r\n## Event Code Bindings\r\n\r\nwith for example @click=\"[[this.aa(event)]]\" you could create a event binding wich could run any javascript code inside of the brackets.\r\nuse @@ if you want to replace - with uppercase in event-names (example: @@my-click -\u003e myClick is the event name)\r\n\r\nyou can use the special props 'event' wich is the event, and 'sender' wich is the element sending the event.\r\n\r\n\r\n### Binding extensions\r\n\r\n - Null/Undefined Extension {{? }} - If you start a binding with a questionmark (like this: {{?), the value of the binding is assigned as an empty string when null or undefined.\r\n - Invert extension {{! }} - If you use \"!\" on the start of a Binding, the bool value is inverted, and also asigned inverted (not yet developed, will do if needed)   \r\n\r\n## Declaritive Custom Element\r\n\r\nWith the node-projects-dce element you could create a custom elment declaritively, see:\r\n\r\nSample:\r\n\r\n    \u003cnode-projects-dce name=\"simple-dce-demo\" properties='{\"list\":\"Array\", \"list2\":\"Array\", \"ctx\":{\"type\":\"String\",\"reflect\":true}}' enable-bindings \u003e\r\n        \u003ctemplate\u003e\r\n            \u003cstyle\u003eh1 {color: red}\u003c/style\u003e\r\n            \u003ch1\u003eHello World\u003c/h1\u003e\r\n            \u003cdiv style=\"border: solid 3px black\"\u003eCtx: [[this.ctx]]\u003c/div\u003e\r\n            \u003ctemplate repeat:myitem=\"[[this.list]]\"\u003e\r\n                \u003cbutton\u003e[[myitem.toUpperCase()]] - \u003cb\u003e[[myitem.toLowerCase()]]\u003c/b\u003e - [[index]]\u003c/button\u003e\r\n                \u003cul\u003e\r\n                \u003ctemplate repeat:myitem2=\"[[this.list2]]\" repeat-index=\"inneridx\"\u003e\r\n                    \u003cbutton @click=\"[[this.ctx = myitem2]]\" \u003e[[myitem.toUpperCase()]] - \u003cb\u003e[[myitem2.toLowerCase()]]\u003c/b\u003e - [[inneridx * 100]]\u003c/button\u003e\r\n                \u003c/template\u003e\r\n                \u003c/ul\u003e\r\n            \u003c/template\u003e\r\n        \u003c/template\u003e\r\n    \u003c/node-projects-dce\u003e\r\n    \u003csimple-dce-demo list='[\"aa\",\"bb\",\"cc\"]' list2='[\"hello\", \"you\"]' ctx=\"TestCtx\" style=\"position:absolute;left:184px;top:-53px;\"\u003e\u003c/simple-dce-demo\u003e\r\n\r\n## Developing\r\n\r\n  * Install dependencies\r\n```\r\n  $ npm install\r\n```\r\n\r\n  * Compile Typescript after doing changes\r\n```\r\n  $ npm run build\r\n```\r\n\r\n## Dependencies\r\n\r\nnone on chrome.\r\n\r\nconstruct-style-sheets-polyfill on safari and firefox \r\n\r\n## Using\r\n\r\nSimple Example Class in Typescript\r\n\r\n```\r\nimport { BaseCustomWebComponentConstructorAppend, html } from '@node-projects/base-custom-webcomponent';\r\n\r\n@customElement('test-element')\r\nexport class TestElement extends BaseCustomWebComponentConstructorAppend {\r\n\r\n    static readonly style = css`\r\n        `;\r\n\r\n    static readonly template = html`\r\n            \u003cdiv id='root'\u003e\r\n                \u003cdiv css:background=\"[[this.bprp ? 'red' : 'green']]\"\u003e[[this.info]]\u003c/div\u003e\r\n                \u003ctemplate repeat:item=\"[[this.list]]\"\u003e\r\n                    \u003cdiv\u003e[[item]]\u003c/div\u003e\u003cbr\u003e\r\n                \u003c/template\u003e\r\n            \u003c/div\u003e\r\n            \u003cbutton @click=\"buttonClick\"\u003eclick me\u003c/button\u003e\r\n        `;\r\n    \r\n    @property()\r\n    list = ['aa', 'bb'];\r\n    @property()\r\n    info = 'hallo';\r\n    @property()\r\n    bprp = false;\r\n\r\n    constructor() {\r\n        super();\r\n        this._restoreCachedInititalValues();\r\n    }\r\n\r\n    async ready() {\r\n        this._root = this._getDomElement\u003cHTMLDivElement\u003e('root');\r\n        this._parseAttributesToProperties();\r\n        this._bindingsParse();\r\n        this._assignEvents();\r\n\r\n        setTimeout(() =\u003e {\r\n            this.info = 'wie gehts?';\r\n            brpp = true;\r\n        }, 5000)\r\n    }\r\n\r\n    buttonClick() {\r\n        alert('hallo');\r\n    }\r\n}\r\n\r\n```\r\n\r\n## Online Sample\r\n\r\nhttps://codesandbox.io/p/sandbox/wkopk\r\n\r\nor here a repo\r\n\r\nhttps://github.com/node-projects/base-custom-webcomponent-sample\r\n\r\n## ready method\r\nThe ready method will be called, when the component is connected the first time. Be aware, that there is no information about the child components. They could be still not ready. When you need to interact with child componets, then use the method _waitForChildrenReady.\r\n\r\n```\r\n  public async ready(): Promise\u003cvoid\u003e {\r\n          await this._waitForChildrenReady();\r\n          // now all children are ready!\r\n          \r\n          const myChild = this._getDomElement\u003cCustomAutoCompleteBoxComponent\u003e('XYZ');\r\n  \r\n```\r\n\r\n## VS Code Snippet\r\n\r\n![vscode-snippet-bcwc_3](https://github.com/node-projects/base-custom-webcomponent/assets/62056776/fe2f9003-5e07-41ba-b8b9-2eea7f42c01f)\r\n\r\n### How to use?\r\n\r\n* Open VS Code\r\n* Press \"STRG\" + \"Shift\" + \"P\"\r\n* Type \"Snippets\"\r\n\r\n![image](https://github.com/node-projects/base-custom-webcomponent/assets/62056776/e91183e4-5662-4645-af2c-d1f9dc81ab18)\r\n\r\n* Select Configure User Snippets\r\n* Select New Global Snippet File ...\r\n* Type in name: basecustomwebcomponent\r\n* Insert follwing code:\r\n\r\n  ```\r\n    {\r\n    \t\"basecustomwebcomponent\": {\r\n            \"prefix\": \"bcwc\",\r\n            \"body\": [\r\n                \"import { BaseCustomWebComponentConstructorAppend, html, css } from '@node-projects/base-custom-webcomponent';\\n\",\r\n                \"export class ${1:${TM_FILENAME_BASE}} extends BaseCustomWebComponentConstructorAppend {\\n\",\r\n                \"\\tstatic readonly template = html`\",\r\n                \"\\t\\t\",\r\n                \"\\t`;\\n\",\r\n                \"\\tstatic readonly style = css`\",\r\n                \"\\t\\t:host {\",\r\n                \"\\t\\t\\tdisplay: block;\",\r\n                \"\\t\\t\\tbox-sizing: border-box;\",\r\n                \"\\t\\t}\",\r\n                \"\\t\\t:host([hidden]) {\",\r\n                \"\\t\\t\\tdisplay: none;\",\r\n                \"\\t\\t}\",\r\n                \"\\t`;\\n\",\r\n                \"\\tstatic readonly is = '${1/(^[A-Z])|(?\u003c=[a-z0-9A-Z])([A-Z])/${1:/downcase}${2:+-}${2:/downcase}/g}';\\n\",\r\n                \"\\tstatic readonly properties = {\",\r\n                \"\\t\\t\\t\",\r\n                \"\\t}\\n\",\r\n                \"\\tconstructor() {\",\r\n                \"\\t\\tsuper();\",\r\n                \"\\t\\tsuper._restoreCachedInititalValues();\",\r\n                \"\\t}\\n\",\r\n                \"\\tready() {\",\r\n                \"\\t\\tthis._parseAttributesToProperties();\",\r\n                \"\\t\\tthis._assignEvents();\",\r\n                \"\\t}\",\r\n                \"}\",\r\n                \"customElements.define(${1}.is, ${1})\",\r\n            ],\r\n            \"description\": \"Sample template for the BaseCustomWebComponent\"\r\n        }\r\n    }\r\n  ```\r\n* Save and type \"bcwc\" and press tap inside an empty file\r\n* Press tap after you entered the classname\r\n\r\n## Articles \r\n\r\nhttps://medium.com/@jochenkhner/a-idea-for-a-base-class-for-web-components-in-2020-b68e0fdf7bca\r\n\r\n## Size\r\n\r\nThe Size of the Base Component is around 25k as ts/js code, 10k minimized and 2.2k brotly compressed.\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnode-projects%2Fbase-custom-webcomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnode-projects%2Fbase-custom-webcomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnode-projects%2Fbase-custom-webcomponent/lists"}