https://omid.dev/tags/stenciljs/Recent content in StencilJs on Omid Farhanghttps://omid.dev/images/bio-photo-150x150.jpghttps://omid.dev/images/bio-photo-150x150.jpgHugo -- 0.165.0en-US2026 Omid Farhang | All rights reserved.Wed, 26 Jun 2024 05:01:11 +0330https://omid.dev/2024/06/26/implementing-custom-web-components-in-angular-with-stenciljs/Wed, 26 Jun 2024 05:01:11 +0330https://omid.dev/2024/06/26/implementing-custom-web-components-in-angular-with-stenciljs/<p>In modern web development, the ability to create reusable components that work across different frameworks and libraries is crucial. This is where Web Components come into play. Web Components allow developers to create custom, reusable HTML elements with encapsulated functionality and styling. However, building Web Components from scratch can be complex and time-consuming. Enter Stencil.js, a powerful tool that simplifies the creation of Web Components.</p> <aside class="card card--accent card--companion companion-card"> <span class="icon-circle icon-circle--lg icon-circle--gradient companion-card__icon" aria-hidden="true"> <i class="fa-solid fa-cubes-stacked"></i> </span> <span class="companion-card__content"> <span class="section-kicker companion-card__eyebrow">Companion resource</span> <strong class="companion-card__title">Companion Project</strong> <span class="companion-card__description">Try the working example in your browser or inspect the full source code behind this article.</span> <code class="companion-card__path">github.com/omidfarhang/example-projects/examples/angular-stencil-web-components</code> </span> <span class="companion-card__actions btn-group"> <a class="btn btn--accent btn--sm" href="https://playground.omid.dev/examples/angular-stencil-web-components/" target="_blank" rel="noopener noreferrer"> <i class="fa-solid fa-play" aria-hidden="true"></i> Open live demo </a> <a class="btn btn--secondary btn--sm" href="https://github.com/omidfarhang/example-projects/tree/master/examples/angular-stencil-web-components" target="_blank" rel="noopener noreferrer"> <i class="fa-brands fa-github" aria-hidden="true"></i> View on GitHub </a> </span> </aside> <p>In this guide, we&rsquo;ll explore how to create custom Web Components using Stencil.js and seamlessly integrate them into Angular applications. Whether you&rsquo;re an experienced developer or just getting started, this comprehensive guide will walk you through each step of the process.</p>