I am at Present Promoting the HTML Component Pattern that i have invented and want to exchange it more with the world to get Response from none Senior Devs if they understand it or not. I found on this page this article and thought I should Post my Pattern here. - https://dev.to/megazear7/the-vanilla-javascript-component-pattern-37la I also hate react for what they did with the Specs and how they try to compensate that with even more bad code. A Little CodePen to play with https://codepen.io/frank-dspeed/pen/xxGRYxp?editors=1011 So let me start to introduce the pattern I will let you think about it. The Rules: Return always String and let the Browser do the Execution we call this Declarative Templating. Here is a basic HTML Component no custom-element is needed to Archive our Goal while we could use customElement api if we want to but we have no need most times if we only use the connectedCallback the Script tag is like a custom Controlled connectedCallback or let us Say ComponentDidMount Hook ```html

My component

``` this example defers also code execution and Component Handling to be executed after DOMContentLoaded event the example before will be executed before DOMContentLoaded ```html

My component

//import.meta.scriptElement.getRootNode() ``` I hope you get the idea and that I could give you some insights into how the Browser Works. As the First that a Browser does is Parsing HTML it makes sense to Work with HTML to control the Loading pipeline. I also want to show a class based Example This is the customElement aka Component lets call the file my-element.js ```js export class myElementDefinition { connectedCallback() { this.querySelector('span').innerText = 'Component' this.innerHTML += ' Works after DOMContentLoaded!'; } } ``` index.html ```html

My component

``` If you wonder why the hell I used apply and all that this is related to the customElement Spec its the same process that the Browser uses to register nativ customElement definitions. And Please comment any suggestions or problems that you have with this Pattern thanks a lot happy coding. ## Final lets show NodeJS SSR of such a Component ```js import fs from 'fs' // This references the index.html from prev example assuming everything in same folder function requestHandler(req,res) { res.end(`${fs.readFileSync('./index.html')}`) } ``` This illustrates that we can render such components and the component handles it self the loading ## Note for my Self I should expand on this to a few other general topics like - How to Import a .html file as single file component. - In that i should introduce the template tag - I should show inharitance. of HTML Components. - I Should show Reactive State via Stream Observeables

frankdspeed

The HTML Component Pattern HCP

Join Our Newsletter. No Spam, Only the good stuff.