Web Components are a group of web platform standards that let developers define their own reusable HTML elements with behavior and styling encapsulated from the rest of the page, without depending on any external framework. The MDN reference describes Web Components as “a suite of different technologies allowing you to create reusable custom elements with their functionality encapsulated away from the rest of your code.” The capability is built into browsers, so a component defined this way works anywhere the standards are supported.
The first pillar is Custom Elements, defined in the WHATWG HTML Standard. The specification states that “custom elements provide a way for authors to build their own fully-featured DOM elements.” Before this, authors could only invent non-standard tags and wire up behavior with ad hoc scripting; custom elements let authors formally register an element name, attach a class that defines its construction, and respond to lifecycle events such as the element being connected to or disconnected from the document, or having its observed attributes changed.
The second pillar is the Shadow DOM, defined in the WHATWG DOM Standard’s treatment of shadow trees. A shadow tree is a separate node tree attached to a host element and rendered in its place, isolated from the main document tree. This isolation is the point: markup and CSS inside a shadow tree do not leak out and are not overridden by styles from the surrounding page, which gives components genuine encapsulation. The spec defines how a shadow root is created, how slots project external content into the shadow tree, and how events compose as they cross the shadow boundary.
The third pillar is HTML templates, the template and slot elements. A template element holds markup that is parsed but not rendered, providing an inert, reusable fragment that a component can clone to build its internal structure. Together with slots, templates let a component author lay out where the consumer’s content should appear inside the encapsulated shadow tree. These three technologies are designed to be used together, though each can be used on its own.
Web Components emerged from work led by Google engineers around 2011 and were progressively standardized at the WHATWG and W3C, with the modern v1 versions of Custom Elements and Shadow DOM shipping across major browsers in the late 2010s. They represent the browser’s own answer to the component model that frameworks like React, Vue, and Angular popularized: rather than each framework inventing its own component abstraction, Web Components push reusable, encapsulated UI building blocks into the platform itself, where libraries such as Lit and many design systems now build on them.