CODEWITHSUNDEEP
javascripthtmlcomponentsweb-component
Vignesh T.V.
Vignesh T.V.

Reputation: 1860

Web Components without writing HTML inside Javascript

I have been reading and tried few web components implementations available to my knowledge and what I don't like in all of them is that they write HTML code for the component inside Javascript/JSX/Typescript.

Frameworks/Implementations I went through:

Polymer: Polymer 1 & 2 felt good since they were doing all the definition using HTML imports and had HTML separate and the JS code separate. But, with Polymer 3, they are also going for React like syntax writing HTML inside JS which I don't like.

Vanilla Webcomponents: It was surprising to see that even vanilla web component specs are like React having HTML inside JS code: https://www.webcomponents.org/introduction again which is something I don't like.

Stencil: While this tool looks promising, I still have the same problem that I have to write the HTML needed for the component inside JS and then it converts it into vanilla JS.

X-Tag: Same issue, HTML inside JS.

Is there any implementation where we don't write HTML within Javascript to use Web Components?

My main reason behind this is Separation of Concerns and I am not able to gel well with it since conventionally the web seemed good separating skeleton, styling and DOM mainpulations separate as HTML, CSS and JS files and now, we are combining everything together which feels messy for me.

And this is one of the main reasons I don't like React as well where we write HTML-Like syntax within javascript.

Upvotes: 5

Views: 1022

Answers (1)

Supersharp
Supersharp

Reputation: 31181

With vanilla Web Components you can decide to separate HTML, Javascript and CSS into diffrent files. It's up to you!

I've developped some complete applications where every component (custom elements) were defined with 3 files: HTML, JS and CSS.

The HTML content is put in a <template> element, and cloned to be inserted in the custom element when it is created.

The HTML file can be imported at runtime via HTML Imports or with fetch() or a XMLHttpRequest object. Alternately, it can be merged (automatically) with Javascript and CSS at build time to constitute only one file to be downloaded.

I don't know the other frameworks but I suppose that for some of them it could be possible, too.

Upvotes: 2

Related Questions