How to get started with a webcomponent - Crashcourse

[trailsnail]

Hi together,

My situation:

• large php/html/js/css app grown over years
• uses grunt for build process less to css and minifying js
• layout bootstrap fully responsive
• takes a lot of time to make some layout changes, wait for built, press f5...

New project:

• nice and shiny modern layouted content page within this app
• layout mocks are ready designed

Instead of programming Block for block with backend setup possibilities I decided to create the whole page from scratch in plain html, separate css in sass compiled by IDE to prevent wasting time on waiting the grown dinosaurs of less files are compiled

This will by my MVP - complete nice looking page in first step. Cut out CMS modules with PHP functionality will come as next step.

Now there layout elements on this page like a "quote container" or little "avatar collections with rounded images"

My thought thanks shoelace are: make my own little web components for this.
Wrapped styles secured from the rest of the page, reusable for upcoming features.

But now the question of all is: how to start?

I don't want to setup another built process in this app where other devs are working too.
I don't want any additional framework overhead if not needed.
At the end I want to write <quote> with some content and it should appear as defined.

Where should I define <template>, where the JS for this?

Sure, trial and error is the best way to learn and my plan is to spend the next weekend to try something out, but I need some hints from people who knows about creating own components. I love using shoelace in our other projects, but now it's time and the need to built one by myself.
There is no need to find the perfect solution in first step thanks to our company and teams agile strategies, but I would prefer a lightweight and easy to understand prototype to work on.

Sure, I'll pay the next beer for useful support.

Nice evening - greetings from Germany

[trailsnail]

... Additionally I don't want to use the existing bootstrap css classes, that's why I want to build the page with grid and flexbox. I want to use this project to bring fresh stuff in the app without building on top of the existing stuff with one eye on current complexity

[claviska]

I don't want to setup another built process in this app where other devs are working too.

You might not have to. Vanilla custom elements don't require one — only if you want to use TypeScript or possibly a runtime library. I say "possibly" because you may be able to use Lit, for example, as part of your current build. (Does it support ESM imports? Give it a try!)

Worst case, you can develop your components separately — and that may even be preferable long term so you can manage them separately and reuse them elsewhere.

I don't want any additional framework overhead if not needed.

The nice thing about custom elements is that you can adopt them incrementally. Start with one component, swap out the old ones. Build another, swap out the old ones.

I think the biggest challenge is in your setup. Does it make sense to try to build them within the existing app or outside of it as a separate package. Both approaches have advantages, but it all depends on your requirements and the existing build.

[trailsnail]

I think the biggest challenge is in your setup. Does it make sense to try to build them within the existing app or outside of it as a separate package. Both approaches have advantages, but it all depends on your requirements and the existing build.

Good question.
I already had the idea to establish Shoelace, at least individual components like "Tags" or "Avatar" via CherryPicking.
But the customer is strict about his look & feel ideas.
Much of the new layout design is based on the coprorate design of the rest of the application.

So I think it would be a good start to just use a vanilla custom element like you wrote.

Here is an example of what I picked from the layout:

TypeScript, ESM imports and so on are things I always read about in passing, but don't use myself (yet). I think it's time to get to grips with it.
Sure, I kind of want to be the one in the house that people go to and ask, "Hey I could use a web component here - can you help me?"

The result in the first step should be to have 2 to 3 components that I can place on different pages of the client's application and that cannot be manipulated with styles from the rest of the page.

I think I'll build a prototype this weekend and may have a question or two.

Thanks for your support, your experience is worth its weight in gold.

And thanks to DeepL translation tool. 😆