An <input type="date"> is a useful model for a reusable component: one HTML element exposes a value, events, and methods while the browser handles a more complex interface. A Web Component brings that idea to a custom element you can place on a page and control through a public API. section 1.1 section 1.3
Start small. Define a JavaScript class that extends HTMLElement, register it with customElements.define('my-slider', Slider), then use <my-slider></my-slider> in HTML. A connectedCallback() method runs when the element is added to the DOM; it can supply markup and behavior. The tag alone does not make a slider slide—you add that interaction yourself. section 2.4 section 2.6
A configurable photo carousel
A photo carousel reads its title, author, and comma-separated photo paths from HTML attributes. Its connectedCallback() creates a heading, image area, and back and forward buttons. Click listeners change the current photo index and refresh the display. That is a useful standalone component, even though its first version places markup and CSS in the ordinary page DOM. section 2.6
Listing 2.6. Our photo carousel component used on a web page
<body>
<wcia-photo-carousel
title="Future Vacation Photos" #1
author="Ben Farrell" #2
photos="images/fBmIASF.jpg,images/3zxD6rz.jpg,images/
nKBgeLOr.jpg,images/yVjJZ1Yr.jpg" #3
></wcia-photo-carousel>
</body>
The carousel markup shows the consumer-facing side of the component: one custom tag configured with attributes. section 2.6
For reuse, decide what belongs in the public API. Attributes can configure an element, properties and methods can control it, and events can report changes. observedAttributes and attributeChangedCallback() let a component respond when selected attributes change. Keeping a property and its corresponding attribute in sync—reflection—is a common practice, not an absolute rule. section 1.3 section 3.0
Encapsulation has two levels. A custom tag and deliberate API make a component simple to use, but ordinary internal DOM remains reachable by outside selectors and styles. An optional shadow DOM protects internal markup and styling from many unintended interactions. Components can also import dependencies through JavaScript modules and compose other components, from a small control up to an application. section 8.1 section 1.1 section 5.5
Check the API version and browser before copying an example. The v1 lifecycle uses constructor, connectedCallback(), disconnectedCallback(), and attributeChangedCallback() with observedAttributes; older v0 names can still turn up in searches. HTML Imports are obsolete. Framework interoperability is a possible use, not a reason to assume every framework component already works as a standalone Web Component. section 4.6 section 15.0 section 1.2
