Web Components
lastmod 2025-09-15created 2017-01-3013 edits
Web Components are a set of features currently[1] being added by the W3C to the HTML and DOM specifications that allow for the creation of reusable widgets or components in web documents and web applications. The intention behind them is to bring component-based software engineering to the World Wide Web.[citation needed] The components model allows for encapsulation and interoperability of individual HTML elements.
Categories
- WebComponents:Accordion
- WebComponents:Alerts
- WebComponents:Avatar
- WebComponents:Badge
- WebComponents:Banner
- WebComponents:BottomNavigation
- WebComponents:Breadcrumb
- WebComponents:Buttons
- WebComponents:ButtonGroup
- WebComponents:Card
- WebComponents:Carousel
- WebComponents:DeviceMockups
- WebComponents:Drawer
- WebComponents:Dropdowns
- WebComponents:Footer
- WebComponents:Forms
- WebComponents:Gallery
- WebComponents:Indicators
- WebComponents:Jumbotron
- WebComponents:KBD
- WebComponents:ListGroup
- WebComponents:MegaMenu
- WebComponents:Modal
- WebComponents:Navbar
- WebComponents:Pagination
- WebComponents:Popover
- WebComponents:Progress
- WebComponents:Rating
- WebComponents:Sidebar
- WebComponents:Skeleton
- WebComponents:SpeedDial
- WebComponents:Spinner
- WebComponents:Stepper
- WebComponents:Tables
- WebComponents:Tabs
- WebComponents:Timeline
- WebComponents:Toast
- WebComponents:Tooltips
- WebComponents:Typography
- WebComponents:Video
Web Forms
- WebForms:InputField
- WebForms:FileInput
- WebForms:SearchInput
- WebForms:NumberInput
- WebForms:Select
- WebForms:Textarea
- WebForms:Checkbox
- WebForms:Radio
- WebForms:Toggle
- WebForms:Range
- WebForms:FloatingLabel
Reference projects
- Flowbite - https://flowbite.com/
- daisyUI - https://daisyui.com/
- Tailwind Stamps - Resuable Tailwind HTML Components
- TW Elements - https://tw-elements.com/
- Preline UI - https://preline.co/index.html
ETC
- Lit - A fast, lightweight library for building web components
- Ripple - An elegant TypeScript UI framework | GeekNews
- Reshaped
Specification
Web Components consist of 4 main features which can be used separately or all together:
- Shadow DOM - Provides encapsulation that hides a component's DOM, CSS, and JS, and separation of scope that controls interference from outside
- HTML Template - Provides the ability to define markup that is inert at load time and clone it at runtime
- Custom Element - Declares an explicit alias for a component through dynamic registration of elements to be used in web documents
- HTML Imports - Provides the ability to include (import) external resources in a web document
About
The elements HTML provides by default sometimes look different depending on the browser and operating system, and they are limited in responding to the ever-evolving web environment. These limitations are being supplemented with JavaScript components. However, JavaScript components are not only difficult to use but also large, making them slow to run. To improve on these problems, the W3C (World Wide Web Consortium) created a specification called Web Components.