---
title: "Building with Web Components and Their Advantages Over Third-party Libraries"
description: "Web development moved from HTML, CSS, and JavaScript toward proprietary libraries such as React, Angular, and Vue, creating interoperability concerns that Web Components aim to address through browser standards. The post traces this shift from early W3C work and Google’s Polymer Project to a toolkit of custom elements, HTML templates, and Shadow DOM, with examples showing how custom tags and reusable markup are defined. Custom elements encapsulate JavaScript behavior, templates defer markup rendering until requested, and Shadow DOM isolates internal styles and elements from surrounding page content. The resulting components can be packaged as dependencies and consumed across most browsers without loading a front-end framework, while libraries including Polymer, Stencil, and Lightning Web Components can abstract the underlying APIs."
---

# Building with Web Components and Their Advantages Over Third-party Libraries

[Heroku](https://yomu.fyi/company/heroku) · Jamie White · Mar 4, 2020

**Type:** Explainer

## Summary

Web development moved from HTML, CSS, and JavaScript toward proprietary libraries such as React, Angular, and Vue, creating interoperability concerns that Web Components aim to address through browser standards. The post traces this shift from early W3C work and Google’s Polymer Project to a toolkit of custom elements, HTML templates, and Shadow DOM, with examples showing how custom tags and reusable markup are defined. Custom elements encapsulate JavaScript behavior, templates defer markup rendering until requested, and Shadow DOM isolates internal styles and elements from surrounding page content. The resulting components can be packaged as dependencies and consumed across most browsers without loading a front-end framework, while libraries including Polymer, Stencil, and Lightning Web Components can abstract the underlying APIs.

## Context

The post describes a shift from standard HTML, CSS, and JavaScript toward proprietary, non-interoperable front-end frameworks, alongside efforts to establish reusable, composable web elements as browser standards.

## Approach / What changed

It presents Web Components through three standards: custom elements for JavaScript-backed HTML tags, HTML templates for reusable deferred markup, and Shadow DOM for encapsulated elements and styles. It also discusses ecosystems and libraries that package or abstract these standards.

## Takeaways

- A custom element is created by extending HTMLElement and registering the class with customElements.define(), allowing reusable HTML tags to encapsulate JavaScript behavior.
- HTML templates remain ignored by the browser until JavaScript calls for them to render, making them suitable for reusable blocks of markup, scripts, and styles.
- Shadow DOM can be attached with attachShadow({ mode: "open" }); its internal styles do not affect surrounding page elements, and outside styles do not affect the shadow content.

**Tags:** [JavaScript](https://yomu.fyi/topic/javascript), [Web Components](https://yomu.fyi/topic/web-components)

- Source: [Heroku](https://www.heroku.com/blog/building-with-web-components)
- Source URL: https://www.heroku.com/blog/building-with-web-components
- Ingested by Yomu: 2026-09-09T16:03:46.573Z

[Read original post](https://www.heroku.com/blog/building-with-web-components)