DEV Community

Web Components in 2025: Building Better Websites for Everyone

Kudzai Murimi on December 24, 2024

Few days left to go to 2025, where web components are changing how we build and enjoy websites. These handy tools make creating websites easier, fa...

Read full post

Danny Engelman • Dec 25 '24

or chain those statements:

constructor() {
    super() // sets AND returns 'this' scope
       .attachShadow({ mode: 'open' }) // sets AND returns this.shadowRoot
       .innnerHTML = `YOUR HTML HERE`

Kudzai Murimi • Dec 25 '24

Thanks @dannyengelman

Michael Nuertey • Dec 28 '24

hello, how do you come about this snippet?

Danny Engelman • Dec 29 '24

Read The Fine Manual

Martins Gouveia • Dec 25 '24

Your post is a gem 💎. Thanks for sharing. Bring more about Web Components if possible.

Kudzai Murimi • Dec 25 '24

Thank you so much, i promise you that i will!

Thanks for your support

Luca Cestola • Dec 26 '24

... and they are standard. I remember Rob Eisenberg's foresight when, speaking for Aurelia, he noted that there was no need to invent the wheel again as so many other frameworks did.

Kudzai Murimi • Dec 26 '24

You're welcome

Wafa Bergaoui • Dec 26 '24

The LEGO analogy is brilliant—it makes understanding web components approachable and fun! I particularly appreciate the clear examples that demonstrate how to create and use custom elements. Well done! 🎉

Kudzai Murimi • Dec 26 '24

i am happy that you found the article helpful

Uzondu • Dec 27 '24

This is my updated submission to the

Join us for the next Frontend Challenge: December Edition!

dev.to staff for The DEV Team ・ Dec 4

#devchallenge #frontendchallenge #javascript #css

I would appreciate any comments and suggestions for improvements; Just thought some would like to see it, here it is:

Narriva - A Minimalist Blog for Traditions and Celebrations**

Uzondu ・ Dec 27

#devchallenge #frontendchallenge #css #javascript

Uzondu • Dec 27 '24

My current skills are in HTML, CSS, Sass, JavaScript, TypeScript(the basics) and Git(basic and intermediate concepts too). However I am still creating projects and building my portfolio. I have decided to avoid freelancing until I am really good, though when I was still starting out, I registered on Upwork out of excitement and have been offline since. But with every project I work on I become better and my most recent project:

Narriva - A Minimalist Blog for Traditions and Celebrations**

Uzondu ・ Dec 27

#devchallenge #frontendchallenge #css #javascript

has me so confident I now feel I should start freelancing but utilizing my first frontend skill which is HTML and using it to create email templates

and I believe earning while learning will help to keep to me motivated
and transition slowly to selling more of my skills. Sorry if my comment is so long but the post seems to have something on this my new venture. I would like some advice on this and what it would take to learn it if would go this way.

Denis Mgaya • Dec 27 '24

This is so cool

George WL • Dec 25 '24

Honestly I really like the idea of web-components but feel like they're missing core features that libraries have as default

Valkoivo • Jan 11

What do you think, for example, what features are missing?

Dadirai Ngandu • Jan 10

Hi I am a fresh upstart who has no clue on webdevelopment and coding which software would you recommend I use and how I will also save them on github

Kudzai Murimi • Jan 10

Hello @deeee5 !

Ok, worry not i am here to help you
First:
Do you have exprience with HTML, CSS and Javascript or did you read above them?
If you have not yet, you can learn about them for free in
freecodecamp.org/learn/?messages=s...

These are the basics to start with.

Have you ever used Codepen? codepen.io/
Have you ever used VS Code code.visualstudio.com/

CodePen and VS Code are used for code editing, as for now that's where you can practise coding

Let me know if you have enough info with the above then we can proceed.