Web Components are the native browser standard for reusable UI elements. Understanding Custom Elements, Shadow DOM, and slots is essential for framework-agnostic component library discussions.
0 / 5 completed
1 / 5
A developer says: 'Build that as a Custom Element for framework-agnostic reuse.' What is a Custom Element?
Custom Elements are part of the Web Components standard. You extend HTMLElement, define lifecycle callbacks (connectedCallback, disconnectedCallback, attributeChangedCallback), and register with customElements.define('my-element', MyClass). They work in any framework or no framework. In discussions: 'build it as a custom element' means create a reusable native browser element that works everywhere.
2 / 5
An engineer says: 'Use the Shadow DOM to encapsulate styles.' What does Shadow DOM do?
The Shadow DOM is an isolated subtree attached to an element. Styles inside the shadow tree don't affect the rest of the page, and page styles don't affect the shadow tree by default. This provides true style encapsulation. In discussions: 'use Shadow DOM' means the component's internal styles won't clash with global CSS — useful for reusable widgets deployed in different contexts.
3 / 5
A PR review says: 'Use a <slot> element to allow content composition.' What is a slot in Web Components?
A <slot> in the Shadow DOM is a placeholder that projects light DOM content into the component. <slot name='header'> renders whatever the consumer places in slot='header'. This enables content composition — the component provides structure, the consumer provides content. In discussions: 'add a slot' means let consumers inject custom content into a specific part of the component.
4 / 5
A developer mentions lifecycle callbacks in Custom Elements. Which callback runs when the element is added to the DOM?
connectedCallback() fires when the Custom Element is inserted into the document. It's the equivalent of React's useEffect(() => {}, []) or Vue's mounted(). Other key callbacks: disconnectedCallback() (removed from DOM), attributeChangedCallback(name, old, new) (observed attribute changed), adoptedCallback() (moved to a new document). These are fundamental to understanding Web Component lifecycles.
5 / 5
A developer says: 'Use a HTML template element for the component's initial markup.' What is the <template> element?
The <template> element holds HTML that is parsed but not rendered when the page loads. Its content can be cloned with template.content.cloneNode(true) and inserted into Shadow DOM. This is efficient for Web Components — the browser parses the template once, and you clone it as many times as needed. In discussions: 'define the shadow DOM structure in a <template>' means separate the markup from the imperative JS.