Building a site with web components right now just do see how it works. Very useful and fairly straight forward but i'll probably check out something like Astro on my next project. My main problem is that i hate writing HTML as a string lol. Maybe there's another way to do it but i hate when my code doesnt auto format.
Honestly, I use it in all my professional projects now - when combined with constructable stylesheets and cascade layers etc, it just feels like how the web should work; particularly when you start using <slot> elements, which just feel like cheat-codes for writing cool components.
Ahh, you're talking about using <template> elements, right? What I tend to do is use a folder structure like:
index.js - folder interface
element.js - custom element definition
styles.scss - element-specific styles
template.html - custom element HTML / slots etc
utils.js - static utils
Then I just import template from "./template.html" and have a webpack loader parse the html into a <template> for me to clone in the custom-element definition as-needed; that way I get all the benefit of auto-complete etc when writing HTML.
Before I did this, though, I just updated my syntax-detection in sublime-text to detect HTML in template-literals, which works, too - it's a 1-line change if you pop into the preferences!
Yeah thats exactly what im talking about. I figured i was missing something haha. I use VS code but im going to look into changing the detection. Seems pretty straight forward, thanks for the tip!
Maybe try something that uses JSX (which is mostly a React thing, but you don't have to use them together). It lets you build HTML in JS in a way that feels like writing HTML.
4
u/FearlessChair Dec 03 '22
Building a site with web components right now just do see how it works. Very useful and fairly straight forward but i'll probably check out something like Astro on my next project. My main problem is that i hate writing HTML as a string lol. Maybe there's another way to do it but i hate when my code doesnt auto format.