{"id":18881134,"url":"https://github.com/intuition-dev/mbtoolbelt","last_synced_at":"2026-01-27T05:31:08.030Z","repository":{"id":95786035,"uuid":"214673114","full_name":"intuition-dev/mbToolBelt","owner":"intuition-dev","description":"slotComps","archived":false,"fork":false,"pushed_at":"2020-10-06T23:03:55.000Z","size":3432,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-23T22:39:41.564Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"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/intuition-dev.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","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-10-12T15:48:38.000Z","updated_at":"2020-10-06T23:03:57.000Z","dependencies_parsed_at":"2023-04-15T20:16:37.301Z","dependency_job_id":null,"html_url":"https://github.com/intuition-dev/mbToolBelt","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"purl":"pkg:github/intuition-dev/mbToolBelt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intuition-dev%2FmbToolBelt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intuition-dev%2FmbToolBelt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intuition-dev%2FmbToolBelt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intuition-dev%2FmbToolBelt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/intuition-dev","download_url":"https://codeload.github.com/intuition-dev/mbToolBelt/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intuition-dev%2FmbToolBelt/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28803861,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T03:44:14.111Z","status":"ssl_error","status_checked_at":"2026-01-27T03:43:33.507Z","response_time":168,"last_error":"SSL_read: 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-08T06:47:37.961Z","updated_at":"2026-01-27T05:31:08.000Z","avatar_url":"https://github.com/intuition-dev.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Slot-centric Custom Elements (SlotCustel)\n\n\n## SlotCustel overview\n\n- Why leverage components for your front end development?\nThe answer should be same for anything in front end development: reduce cost of development and maintenance, and improved UX/UI.\nSo let me show you a very good way to be a productive front end software developer. \n\n- Why custom elements? The big 3 front end frameworks (Vue, React, Angular) are more than a decade old and require downloading and maintain a 3rd party library. Also, I have not seen them improve productivity of front end development relative to \neven LAMP. Custom elements are built into the browser!\n\n- How to use Custom Elements to maximize the benefits? Ans: They are Custom! So you create them per page|screen.\nA costly mistake based on my experience is to prematurely leverage DRY for CustEl. Instead use a rule of 3: When you use it a 3rd time, consider a way\nto  reuse - but not before. (Also people prematurely add a design system in a Custel, when it can remain at page level) But short story is: Custom per page!\n\n\nHere is an example SlotCustel code, notice the default template is blank, nudging you to put DOM in the slot/page:\n```javascript\n   // default template\n   defTemplate = `\u003cslot\u003e\u003c/slot\u003e`;\n```\n\n\nHere are 2 example of a page/screen using SlotCustel, I'm using Pug syntax instead of HTML (Pug is the default template language by the most popular JavaScript HTTP server: Express js, Pug takes about 5 seconds to learn if you know HTML)\nbut you can use HTML if you are old school.\nA form page using SlotCustel example:\n```pug\n    pg-custel \n        form.grid-form#loginF\n        fieldset\n            div(data-row-span='1')\n                div(data-field-span='1')\n                label Name\n                input#email.form-control(type='text')\n            div(data-row-span='1')\n                div(data-field-span='1')\n                label Password\n                input#pswd.form-control.pswd(type='password')\n        #loginBut.btn.btn-sm.btn-a Login\n```\nAnd a list (list.js) page using SlotCustel:\n```pug\n    pg-custel \n    p Table:\n    #contactLst\n        table.table\n        thead\n            th FName\n            th LName\n            th Email\n            th Org\n        tbody.list\n```\n\nAnd now you can write your Custel javascript|typescript code, and manage the DOM in the slot like you would write a normal Custom Element, for example doing data-binding. Most/all the page JavaScript code is move to the SlotCustel. \nNotice that if someone needs to maintain the page, they can just edit the page DOM.\n\nAnd that is the over view. Lets learn this dance. \n\n### Standard (non-slot) Custel example\nUsing a Custel in a page:\n```pug\n   script(type='module').\n      import { EventFlux } from 'https://cdn.jsdelivr.net/gh/intuition-dev/mbToolBelt@v8.4.25/eventFlux/EventFlux.min.js'\n      EventFlux.init()\n\n      defEventFlux.register('c-custel-x', function(evt) {\n         console.log('**pg received message**', evt)\n\n         let c = document.getElementById('c1')// as needed\n      })\n   \n   c-custel(bla=3)#c1\n      p Slot In\n   \n   script(src='/c-custel.js' type='module')\n```\nNotice we use an Event Bus called EventFlux. EventFlux is more reliable than Custom Events. More on EventFlux:\n- https://github.com/intuition-dev/mbToolBelt/tree/master/eventFlux\n\n#### Now lets write the c-custel\nCode:\n```typescript\nimport { AbsSlotCustel } from 'https://cdn.jsdelivr.net/gh/intuition-dev/mbToolBelt@v8.4.25/slotCustel/slotCustel/AbsSlotCustel.min.js';\nclass Custel1 extends AbsSlotCustel {\n    template = `\n        \u003cstyle\u003e\u003c/style\u003e\n        \u003cb\u003eI'm a Cust. El\u003c/b\u003e\n        \u003cslot\u003e\u003c/slot\u003e`;\n   \n    constructor() {\n        super();\n        this.setup(this.template); // call the helper method from the base class\n        this.sr.addEventListener('click', function (e) { // sr is shadow root in base class\n            console.log(e.composedPath()[0]);\n        });\n        defEventFlux.doAction('c-custel-x', { a: 'b', c: 'd' });\n    }\n    static get observedAttributes() { return ['bla', 'bla2']; }\n    attributeChangedCallback(aName, oldVal, newVal) {\n        console.log('custel received message', aName, newVal);\n    }\n}\ncustomElements.define('c-custel', Custel1);\n```\nWe import AbsSlotCustel that has very few lines of helper code. \n\nIn this example we used both slot and custom DOM, but the default is to only use slot.\n\n\n### Full SlotCustel example, and application\n\nHere is a login form SlotCustel example:\n- https://github.com/intuition-dev/httpRPC/blob/master/CRUD/webApp/loginScreen/pg-custel.js\nHere is a list SlotCustel example:\n- https://github.com/intuition-dev/httpRPC/blob/master/CRUD/webApp/contactScreen/pg-custel.js\n\nAnd you can download the full app - including API calls via: \n```\n    npx mbake -c .\n```\n\n## Summary\n\nA very productive way to develop front end is to heavily leverage slot part of the Custel. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintuition-dev%2Fmbtoolbelt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fintuition-dev%2Fmbtoolbelt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintuition-dev%2Fmbtoolbelt/lists"}