How to Create Web Components with Stencil

In this video we will create a standard web component using Stencil and afterwards integrate the web component into an Ionic Angular project!

#############################

👨‍💻 Want to read instead of watch?

😱 NEW: Capacitor Crash Course!

⚡️Take my famous 7 Day Ionic Crash Course

🤷‍♂️Want more Ionic tutorials?

#############################

❤️You can also find me...

Or join our Facebook group:

#############################

00:00 Intro
01:29 Stencil project structure
07:25 Creating a Stencil component
17:50 Build & use a web component
27:50 Outro

#stencil #webcomponent #ionic

[DaylightDreaming]

🎯 Key Takeaways for quick navigation:

00:00 🎯 Stencil ist ein Compiler zur einfachen Erstellung von Webkomponenten.
00:28 🚀 Stencil ermöglicht schnelle Entwicklung mit Live Reload.
01:54 🛠️ Die Verwendung von "npm init stencil components" startet ein neues Stencil-Projekt.
03:19 🔧 Das Stencil-Projekt wird über die Konfigurationsdatei "stencil.config.ts" gesteuert.
06:48 💡 Stencil-Komponenten bestehen aus Klassen, Dekoratoren und Rendering-Funktionen.
08:53 🔄 Eigenschaften (Properties) und Zustand (State) können in Stencil-Komponenten verwendet werden.
11:23 📤 Event Emitter ermöglicht die Kommunikation von Kind- zu Elternkomponenten.
12:33 🔌 Slots erlauben das Einfügen von Inhalt in Webkomponenten.
14:51 🎨 CSS-Variablen können für flexibles Styling von Webkomponenten verwendet werden.
21:25 🧪 Lokale Entwicklung von Webkomponenten mit "npm link" und Test in Ionic-Anwendungen.
25:48 💡 Stencil bietet umfassende Möglichkeiten: Designsysteme, Lebenszyklus-Methoden, Komponenten-Nesting und mehr.
26:30 🛠️ Integrierbare Frameworks wie Angular, React oder Vue erfordern spezifische Ansätze für tiefere Integration.
27:42 🔄 Die Verwendung von Stencil-Komponenten ist in verschiedenen Frameworks (Angular, React, Vue) ähnlich, aber mit unterschiedlichen Einbettungsmethoden.
28:11 👍 Die Einfachheit und Vielseitigkeit von Stencil machen es lohnenswert, eigene Komponenten zu erstellen und in verschiedenen Projekten zu verwenden.

Made with HARPA AI

[andycetnarskyj]

Great intro, would love to see one more in-depth like making an image carousel or tab panels. Most stencil tutorials only cover the basics

[silviopereira]

Great introduction to integration Stencial to Ionic projects, thanks

[TheSaceone]

Great introduction to Stencil Simon! As usual, you did a very good explanation. So glad I subscribed to your channel!

[avvarupreethi]

Hi, can u please tell me how to change port in stencil.

[patrick]

good video. it is just very fun when you say slot

[amirtorabi]

How can integrate vuetify inside of web component ?

[Kikurage]

Great video Simon ! Is there a place to list and share the sort of components ?

[Dream]

I think, the dash in the component name is used to seperate custom components from native html-elements.
Thanks for your great work!

[ivinantony]

Hi simon, can you do a video of ionic 6 background geolocation?? Its seems a lot do errors in that

[ThiagoLucioBittencourt]

I'm having the same problem of reloading css styles including with Storybook. Mainly when I generate the npm package and integrate it into Angular or React applications. How to use it to create a System Agnostic Design makes no sense to use as specific integrations in Angular or React projects. I believe that this tool still has something to mature but it is really very good.

[alexkode]

Hi Simon can you do an updated tutorial in Ionic 6 on how to access capacitor storage (async) before doing an http request?

[allenjacobson]

What about the distribution? There are a lot of things on the documentation that simply not explained anywhere! like how to use stencil components within stencil components? How does the autoDefineCustomElements work (For me it doesn't work)?

[humbisc]

Hi Simon! Awesome video as usual. I have a question. Have you looked into how to support per-app language settings with Ionic?

[Matheus_]

It will be possible to create a website only using StencilJs

[sogggy]

Hello Simon, big fan. How bout a tutorial with taking pictures then having markers automatically generated on Google Maps ?