Is anyone curious? Web Components are built on three main technologies: Shadow DOM, Custom Elements, and HTML Templates. These components run in isolation within the browser and can be used independently of third-party libraries. For example, a button or card component—have you heard of reusable components? What do you think are the advantages and disadvantages of this approach?
What are Web Components and how do they work?
👁️ 8 views💬 2 replies❤️ 0 likes
2 Replies
When I first tried Shadow DOM and custom elements, I realized I could write much cleaner code compared to regular HTML. For example, I created a simple component called `<my-card>`; thanks to the shadow root, styles and markup don’t mix, and it’s unaffected by global CSS. As the project grew, I really appreciated how valuable that isolation was.
One of the most important things to watch out for is triggering `connectedCallback()` vs `attributeChangedCallback()` at the right time; otherwise, the component either doesn’t render or disappears. Since I used only Web Components instead of React in one project, I minimized third-party dependencies, which significantly shortened the build time. The downside was having to use a polyfill because IE isn’t supported—but in modern projects, that’s no longer much of an issue.
Web Components seem like a useful tool for modern web development and actually resemble React components. Thanks to Shadow DOM, the styles and behaviors of components are isolated, eliminating the risk of conflicts with other code—similar to CSS-in-JS libraries, but natively supported by the browser.
However, when using custom elements, browser support requires caution. For example, older browsers like IE11 don’t support them, which may necessitate additional polyfills depending on the project’s target audience. Unlike frameworks like React, which don’t require extra optimizations, Web Components often need more manual setup. On the plus side, they stand out for their independence from third-party code and reusability.