When the Right Tool Has Its Moment: My Experience with Web Components
By Tom Crawford, Software Developer
Not every useful technology is brand new. Sometimes a tool has been sitting on the shelf for years, quietly maturing, waiting for the right moment when the support, tooling, and community catch up to its potential.
Recently, I had the chance to put the Web Components standard to work for a client project. It is not a new technology — it has been around for over a decade — but in recent years it has finally reached a level of browser support and ecosystem adoption that makes it viable for more real-world applications. This project proved to be a perfect time to take advantage of that.
The Challenge
The client needed a component library for their applications. Their existing projects were built in plain Vanilla JavaScript, but they were considering React for future work. They wanted something that could work for both worlds without forcing them into a single framework.
That is when I thought of Web Components, a set of JavaScript APIs that lets you create custom HTML elements. They are framework agnostic, can be built in Vanilla JavaScript, and sounded like the perfect middle ground. When I pitched the idea, the client immediately liked the thought of having reusable components that would not tie them to a single front-end stack.
At Seven Hills, we always approach emerging technology — or in this case, maturing technology — with a healthy mix of curiosity and caution. We do not jump into something just because it is trending. We look for tools that solve the actual problem in front of us and will still make sense when the hype fades.
The Good
Working with Web Components felt refreshingly straightforward at first. There is no framework-specific syntax to wrestle with, just new methods to learn. If you already know JavaScript and HTML, you can get moving without weeks of ramp-up time. That meant I could focus more on solving the actual problem than on navigating the quirks of a new framework.
What made this project stand out was how much control the client had when using the library we built. Menu buttons could be added or removed within components whenever they needed, without calling us back in for extra work. Data tables could be customized to display exactly what they wanted. Business logic could be handled directly by the client or left to the built-in defaults we provided. We intentionally designed it so the library worked right out of the box, but with the flexibility for the client to tweak and extend it with minimal effort.
Because Web Components behave just like regular HTML tags, the same library could plug right into both their current JavaScript projects and any future React work without a heavy rewrite.
The Bad
That said, Web Components are not without their challenges. While the APIs are accessible, there is a lot to learn, and some of those methods are things you do not often touch when working inside a modern UI framework.
The bigger challenge is that you are suddenly responsible for all the behind-the-scenes work that frameworks usually handle for you. Input binding, lifecycle management, context binding — all of it is on you. That level of detail can be intimidating if you are not used to it, and it makes debugging and code tracing more involved than you might expect.
My Takeaway
Even with the hurdles, I would happily use Web Components again. They are powerful, flexible, and working with them gave me a chance to brush up on some of the less-traveled parts of the JavaScript landscape.
The main lesson I took away is that technology decisions should always be made with the specific situation in mind. In this case, the client needed something that could serve them well in Vanilla JavaScript today while keeping the door open to React tomorrow. Web Components were the right fit, and I would make the same recommendation again without hesitation.
At Seven Hills, this is exactly how we approach technology choices. We do not adopt something just because it is new or flashy. We experiment, we stress-test, and we ask hard questions about how it will perform in real-world scenarios. When the hype fades, we want our clients left with solutions that are reliable, adaptable, and worth the investment. That mindset keeps us curious, keeps us sharp, and, most importantly, keeps our clients confident that we are looking out for their long-term success, not just chasing trends.
Frequently Asked Questions
Latest Posts
We’ve helped our partners to digitally transform their organizations by putting people first at every turn.
This blog primarily draws on Conversational AI for examples, but there are many otherways to integrate Generative AI into a project, and I hope there is helpful information for thosepursuits as well.
Discover how applying decision-making frameworks can turn system bottlenecks into strategic opportunities that accelerate business growth rather than slow it down.
AI coding tools make building software easier, but they're creating dangerous security blind spots for non-technical developers who don't understand the code they're deploying.
Continuing our guide to testable front-end code with advanced patterns, real-world examples, and the traps that even experienced devs miss.
A practical guide to writing testable front-end code, mocking strategies, and applying best practices to ensure your codebase stays clean, maintainable, and covered.
Think your MCP server is safe? One poisoned tool could quietly turn it into a data-leaking backdoor.
Most companies don’t need a full-time AI exec—they need smart, fractional leadership that aligns AI with real business goals.
Struggling with large file uploads in React Native? We hit memory leaks and corrupted files over 2GB—then fixed it by building native modules. Here’s how.
How AI Is Changing the Way We Build Software: Our developers are using AI tools like GitHub Copilot to move faster and smarter—shifting from manual coding to strategic prompting and editing. Learn how this evolving approach is helping us deliver high-quality software in less time.
The RFP process is broken. Here's how public sector teams can get better outcomes by partnering earlier, focusing on users, and rethinking how government tech gets built.
Nurturing junior developers in today’s remote and AI-driven workplace is essential for long-term success, yet it comes with unique challenges. This article explores practical strategies to help junior talent thrive.
Effective discovery is crucial in software development to prevent budget overruns and project delays. By conducting discovery sprints and trial projects, businesses can align goals, define scope, and mitigate risks, ensuring successful outcomes.
In this article, we address the advantages and disadvantages of native apps and compare them to those of React Native apps. We will then propose one example of a ‘good fit’ native app and a ‘good fit’ React Native app. The article concludes with a general recommendation for when you should build your application natively and when to do so in React Native.
Adoption of cloud services like Microsoft Azure is accelerating year over year. Around half of all workloads and data are already in a public cloud, with small businesses expanding rapidly and expecting up to 70% of their systems to be in a public cloud within the next 12 months. Are you sure your data is secure?
In this short article I would like to show you one example of High Cohesion and Low Coupling regarding Software Development. Imagine that you have a REST API that have to manage Users, Posts and Private Message between users. One way of doing it would be like the following example: As you can see, the […]
Custom software is a great way to increase efficiency and revenue for your organization. However, creating custom software means more risk for you. Here are a few common problems to avoid when building your next mobile or web app. 1. Cost Overrun One of the biggest challenges of custom software development is gathering requirements. The process […]
So, you want to build some software. But where do you start? Maybe you’re not ready to take on the large task of hiring a team internally. Of all the options out there for building your software, two of the most common are staff augmentation and project-based consulting. So what’s best for you, staff augmentation […]
Failed implementing agile in your organization? Agile isn't the problem.
Are you ready to hire software developers? It might be worth more investigation.
Solve your next production issue with less headache and better insight.
How to use empathy to drive decisions around the platform for your future application.
