Web Components in Ionic Framework

This project is an Ionic app showcasing Angular custom components and Stencil custom web components. This repo is part of the post: Mastering Web Components in Ionic Framework.

Run the project

Install the dependencies: npm install

Run the project: ionic serve

Demo

Web Components, Shadow DOM, CSS Variables. Understanding the new components architecture in Ionic.

In our previous post Ionic 4 vs Ionic 3 — What you need to know about Ionic 4 we surfaced the main differences between Ionic 3 and Ionic 4.

Ionic 4 introduced a lot of changes that you need understand because they changed the way Ionic Framework components work.

Then, when Ionic 5 was released, we created the post What's new in Ionic 5 - Migration and Free Starter where we explain how to take advantage of the new benefits from Ionic 5.

In this series of posts we are going to go deeper on the structure and core concepts of Ionic apps and explore more advanced topics, so if you are new to Ionic, I strongly recommend that you first read our Introduction to Ionic tutorial.

Covering everything from styling and customizing Ionic components, to building custom web components with Stencil and then use them in your Ionic projects (or any other framework, as web components are framework agnostic!).

Get a premium Ionic 5 Starter App

Did you know that we recently released Ionic 5 Full Starter App? It's an ionic 5 template that you can use to jump start your Ionic app development and save yourself hundreds of hours of design and development.

It is also a PWA and uses Ionic Web Components. Try it on your phone to see how it works!