{"id":19409574,"url":"https://github.com/ionicthemes/ionic-custom-components","last_synced_at":"2025-04-24T10:31:35.198Z","repository":{"id":43446629,"uuid":"147345031","full_name":"ionicthemes/ionic-custom-components","owner":"ionicthemes","description":"🌈 Ionic Tutorial: Mastering Web Components in Ionic Framework. This repo is an Ionic project showcasing Angular custom components and Stencil custom web components.","archived":false,"fork":false,"pushed_at":"2022-12-08T11:50:00.000Z","size":995,"stargazers_count":31,"open_issues_count":10,"forks_count":15,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-10T16:41:46.652Z","etag":null,"topics":["angular","css4","custom-components","ionic","ionic-framework","shadow-dom","stencil","stenciljs","web-components"],"latest_commit_sha":null,"homepage":"https://ionicthemes.com/tutorials/about/ionic-4-tutorial-mastering-web-components-in-ionic-4","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ionicthemes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-04T12:48:18.000Z","updated_at":"2023-05-17T06:48:48.000Z","dependencies_parsed_at":"2023-01-25T13:00:22.820Z","dependency_job_id":null,"html_url":"https://github.com/ionicthemes/ionic-custom-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ionicthemes%2Fionic-custom-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ionicthemes%2Fionic-custom-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ionicthemes%2Fionic-custom-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ionicthemes%2Fionic-custom-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ionicthemes","download_url":"https://codeload.github.com/ionicthemes/ionic-custom-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223948505,"owners_count":17230132,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","css4","custom-components","ionic","ionic-framework","shadow-dom","stencil","stenciljs","web-components"],"created_at":"2024-11-10T12:11:57.289Z","updated_at":"2024-11-10T12:11:57.877Z","avatar_url":"https://github.com/ionicthemes.png","language":"TypeScript","readme":"# Web Components in Ionic Framework\nThis 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](https://ionicthemes.com/tutorials/about/ionic-4-tutorial-mastering-web-components-in-ionic-4). \n\n\n### Run the project\nInstall the dependencies:\n`npm install`\n\nRun the project:\n`ionic serve`\n\n### Demo\n![](https://media.giphy.com/media/1swuqPMEqALdgm3NJ8/giphy.gif)\n\n\n### Web Components, Shadow DOM, CSS Variables. Understanding the new components architecture in Ionic.\nIn our previous post [Ionic 4 vs Ionic 3 — What you need to know about Ionic 4](https://ionicthemes.com/tutorials/about/ionic-4-vs-ionic-3) we surfaced the main differences between Ionic 3 and Ionic 4. \n\nIonic 4 introduced a lot of changes that you need understand because they changed the way Ionic Framework components work. \n\nThen, when Ionic 5 was released, we created the post [What's new in Ionic 5 - Migration and Free Starter](https://ionicthemes.com/tutorials/about/ionic5-tutorial-migration-and-starter) where we explain how to take advantage of the new benefits from Ionic 5.\n\nIn 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](https://ionicthemes.com/tutorials/about/ionic-framework-introduction-and-key-components).\n\nCovering 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!).\n\n### Get a premium Ionic 5 Starter App\nDid you know that we recently released [Ionic 5 Full Starter App](https://ionicthemes.com/product/ionic5-full-starter-app-pro-version)? 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.\n\nIt is also a PWA and uses Ionic Web Components.\nTry it on your phone to see how it works!\n\n\u003cimg src=\"https://ionicthemes.s3-us-west-2.amazonaws.com/cover_images/redesign/ionic5-full-starter-app-pro.jpg\"/\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fionicthemes%2Fionic-custom-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fionicthemes%2Fionic-custom-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fionicthemes%2Fionic-custom-components/lists"}