Learn Ionic
We help you
get better at
creating
Ionic Apps

Best advice, how-tos, insights, detailed tutorials, step-by-step guides,
and free code examples from Ionic community leaders.

IONIC

Web Components

TUTORIALS

Web Components are a set of different technologies that allow you to create custom reusable elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

Using Web Components, you can create almost anything that can be done with HTML, CSS and JavaScript. You can build a portable component that can be easily reused without fear of code collisions.

Web Components are based on 4 specifications: Custom Elements (JavaScript APIs to define custom elements and their behavior), Shadow DOM (encapsulation), ES Modules, and HTML Templates (code not displayed in the rendered page).

Why do we care about Web Components? Because Ionic UI Components are built as Web Components. Read the following tutorials to learn what are Web Components and how to use them and style them in Ionic Apps.