# Stencil **URL:** https://forum.ionicframework.com/c/stencil/21.md [Latest](https://forum.ionicframework.com/latest.md) · [Categories](https://forum.ionicframework.com/categories.md) · [Tags](https://forum.ionicframework.com/tags.md) --- ## [About the Stencil category](https://forum.ionicframework.com/t/about-the-stencil-category/125380)
**Author:** [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Replies:** 0\ **Last updated:** [March 21, 2018, 1:22pm UTC](https://forum.ionicframework.com/t/about-the-stencil-category/125380 "2018-03-21T13:22:01Z")
Topics related to Stencil, the toolchain for building reusable, scalable Design Systems and blazing fast static web apps. --- ## [Generating utils from angular-output-target errors](https://forum.ionicframework.com/t/generating-utils-from-angular-output-target-errors/251059)
**Author:** [@desouzadecastro-code](https://forum.ionicframework.com/u/desouzadecastro-code)\ **Replies:** 0\ **Last updated:** [April 8, 2026, 8:53am UTC](https://forum.ionicframework.com/t/generating-utils-from-angular-output-target-errors/251059 "2026-04-08T08:53:55Z")
Hi! We’re running into an issue that left us without many ideas left of what might be happening. The goal is transform our Stencil components into Angular and React outputs, then run their respective builds though an aut… --- ## [The Quest for SSR with Web Components: A Stencil Developer's Journey](https://forum.ionicframework.com/t/the-quest-for-ssr-with-web-components-a-stencil-developers-journey/248302)
**Author:** [@system](https://forum.ionicframework.com/u/system)\ **Replies:** 0\ **Last updated:** [June 25, 2025, 4:57am UTC](https://forum.ionicframework.com/t/the-quest-for-ssr-with-web-components-a-stencil-developers-journey/248302 "2025-06-25T04:57:46Z")
Originally published at: The Quest for SSR with Web Components: A Stencil Developer's Journey - Ionic Blog Picture this: You’ve built a beautiful design system using Web Components. Your components are framework-agno… --- ## [Help with angular-output-target](https://forum.ionicframework.com/t/help-with-angular-output-target/247650)
**Author:** [@azCoder78](https://forum.ionicframework.com/u/azCoder78)\ **Replies:** 1\ **Last updated:** [April 28, 2025, 10:35pm UTC](https://forum.ionicframework.com/t/help-with-angular-output-target/247650 "2025-04-28T22:35:25Z")
Hey there! Im new to the forum and to Stencil.js. Im writing a toggle switch component in which i need to compile it for angular and React. I’ve installed the angular-output-target. The component builds and the the files… --- ## [Stencil Reframed: Community-Driven Governance Takes Center Stage](https://forum.ionicframework.com/t/stencil-reframed-community-driven-governance-takes-center-stage/247477)
**Author:** [@system](https://forum.ionicframework.com/u/system)\ **Replies:** 0\ **Last updated:** [April 8, 2025, 9:28pm UTC](https://forum.ionicframework.com/t/stencil-reframed-community-driven-governance-takes-center-stage/247477 "2025-04-08T21:28:25Z")
Originally published at: Stencil Reframed: Community-Driven Governance Takes Center Stage Stencil has become an essential tool for companies of all sizes who are building sustainable design systems. These design syst… --- ## [What is the Future of the Stencil Team After the Outsystems Acquisition? Will the Team Be Let Go?](https://forum.ionicframework.com/t/what-is-the-future-of-the-stencil-team-after-the-outsystems-acquisition-will-the-team-be-let-go/245555)
**Author:** [@lucas-v-souza0](https://forum.ionicframework.com/u/lucas-v-souza0)\ **Replies:** 1\ **Last updated:** [December 9, 2024, 8:38pm UTC](https://forum.ionicframework.com/t/what-is-the-future-of-the-stencil-team-after-the-outsystems-acquisition-will-the-team-be-let-go/245555 "2024-12-09T20:38:04Z")
Now that Outsystems has acquired Ionic, what will be the future of Stencil? Of course, the current project will continue to be open source, I know… But will the original Stencil team keep working on the project and fixin… --- ## [Setting styleUrls to a function/variable gives a weird error](https://forum.ionicframework.com/t/setting-styleurls-to-a-function-variable-gives-a-weird-error/244917)
**Author:** [@jvlobo](https://forum.ionicframework.com/u/jvlobo)\ **Replies:** 0\ **Last updated:** [October 30, 2024, 12:45pm UTC](https://forum.ionicframework.com/t/setting-styleurls-to-a-function-variable-gives-a-weird-error/244917 "2024-10-30T12:45:17Z")
I’m trying to generate the objet for the styleUrls dynamically, but when doing so I’m getting the weirdest error. Here is the interesting pieces of my code: @Component({ tag: 'my-input', styleUrls: getStylesForComp… --- ## [Add lifecycle method to all components, or listen for connected/loaded](https://forum.ionicframework.com/t/add-lifecycle-method-to-all-components-or-listen-for-connected-loaded/244835)
**Author:** [@gavmck](https://forum.ionicframework.com/u/gavmck)\ **Replies:** 0\ **Last updated:** [October 24, 2024, 8:28am UTC](https://forum.ionicframework.com/t/add-lifecycle-method-to-all-components-or-listen-for-connected-loaded/244835 "2024-10-24T08:28:23Z")
I would like to know when a component instance is first rendered on a page. There seems to be a couple of ways of tackling this. Inject something in the build that adds a lifecycle method to all components (like compone… --- ## [How to use Storybook with Stencil](https://forum.ionicframework.com/t/how-to-use-storybook-with-stencil/221580)
**Author:** [@agiuliano](https://forum.ionicframework.com/u/agiuliano)\ **Replies:** 6\ **Last updated:** [October 18, 2024, 11:24am UTC](https://forum.ionicframework.com/t/how-to-use-storybook-with-stencil/221580 "2024-10-18T11:24:17Z")
Originally published at: How to use Storybook with Stencil - Ionic Blog Storybook is an incredible tool that allows you to build, test, and document the components of your design system in isolation. Storybook provid… --- ## [Stencil for React and Next js (without App router)](https://forum.ionicframework.com/t/stencil-for-react-and-next-js-without-app-router/244653)
**Author:** [@govindnc](https://forum.ionicframework.com/u/govindnc)\ **Replies:** 0\ **Last updated:** [October 13, 2024, 7:06pm UTC](https://forum.ionicframework.com/t/stencil-for-react-and-next-js-without-app-router/244653 "2024-10-13T19:06:10Z")
I followed the docs provided for React integration. Build that does not produce straight forward results. I had to tweak package json in stencil to make it work for React consumer application. And it does not work for N… --- ## [Ignore external imports on build if they are not found](https://forum.ionicframework.com/t/ignore-external-imports-on-build-if-they-are-not-found/235953)
**Author:** [@razvanmazilu0](https://forum.ionicframework.com/u/razvanmazilu0)\ **Replies:** 1\ **Last updated:** [October 7, 2024, 3:33pm UTC](https://forum.ionicframework.com/t/ignore-external-imports-on-build-if-they-are-not-found/235953 "2024-10-07T15:33:03Z")
Stencil version: @stencil/core@\<2.11.0\> Current behavior: Hello Ionic Team, We are currently trying to build multiple web components (made with StencilJS) in a bigger project, which it’s incorporating all of them. P… --- ## [componentCorePackage not defined in ReactOutputTargetOption](https://forum.ionicframework.com/t/componentcorepackage-not-defined-in-reactoutputtargetoption/243811)
**Author:** [@mdellanave](https://forum.ionicframework.com/u/mdellanave)\ **Replies:** 0\ **Last updated:** [August 23, 2024, 5:03pm UTC](https://forum.ionicframework.com/t/componentcorepackage-not-defined-in-reactoutputtargetoption/243811 "2024-08-23T17:03:19Z")
Hi, I’m having trouble following this guide React Integration with Stencil | Stencil I think there’s something wrong because I have this warning from vs code There’s also an undefined folder but I don’t know why … --- ## [Embedding font icons](https://forum.ionicframework.com/t/embedding-font-icons/243769)
**Author:** [@mdellanave](https://forum.ionicframework.com/u/mdellanave)\ **Replies:** 2\ **Last updated:** [August 22, 2024, 12:49pm UTC](https://forum.ionicframework.com/t/embedding-font-icons/243769 "2024-08-22T12:49:58Z")
Hi, I’m trying to make a video player that uses videojs but I have some problems with the font icons… For some reasons, in the network tab there’s no call to the woff font. The path is right (I had to use a videojs scs… --- ## [Publishing Angular Wrapper Library](https://forum.ionicframework.com/t/publishing-angular-wrapper-library/243718)
**Author:** [@Beeblebrix](https://forum.ionicframework.com/u/Beeblebrix)\ **Replies:** 1\ **Last updated:** [August 20, 2024, 1:37pm UTC](https://forum.ionicframework.com/t/publishing-angular-wrapper-library/243718 "2024-08-20T13:37:56Z")
I followed the StencilJS Angular Integration guide and can successfully use my Angular wrapper components in a demo angular app within a monorepo setup. However, I don’t want to develop web components alongside the targe… --- ## [Test failed because of MutationObserver](https://forum.ionicframework.com/t/test-failed-because-of-mutationobserver/243728)
**Author:** [@mdellanave](https://forum.ionicframework.com/u/mdellanave)\ **Replies:** 0\ **Last updated:** [August 21, 2024, 8:02am UTC](https://forum.ionicframework.com/t/test-failed-because-of-mutationobserver/243728 "2024-08-21T08:02:08Z")
Hi all, I’m having trouble on my tests because MutationObserver seems to be undefined in the test environment (maybe because jest is using the node env?) I read something about using jest-environment-jsdom or usin… --- ## [Dependencies from other stencil projects](https://forum.ionicframework.com/t/dependencies-from-other-stencil-projects/243046)
**Author:** [@RuiCardoso021](https://forum.ionicframework.com/u/RuiCardoso021)\ **Replies:** 0\ **Last updated:** [July 10, 2024, 1:50pm UTC](https://forum.ionicframework.com/t/dependencies-from-other-stencil-projects/243046 "2024-07-10T13:50:34Z")
I have, two lib \[A\] and \[B\]. After install lib \[A\] into lib \[B\] and import one component from lib \[A\] always in build compile components from bouths. My question is, exist any form to compile only internal components and… --- ## [Button component with "aria-labelledby" attribute not working correctly](https://forum.ionicframework.com/t/button-component-with-aria-labelledby-attribute-not-working-correctly/242555)
**Author:** [@MichaelRydl](https://forum.ionicframework.com/u/MichaelRydl)\ **Replies:** 0\ **Last updated:** [June 20, 2024, 10:45am UTC](https://forum.ionicframework.com/t/button-component-with-aria-labelledby-attribute-not-working-correctly/242555 "2024-06-20T10:45:04Z")
Hello, I have a question about the “ion-button” component. When I use the button with the “aria-labelledby” attribute and link it to an HTML element with a specific “id” acting as the button’s label, the screen reader d… --- ## [Jest + Stencil + ESM](https://forum.ionicframework.com/t/jest-stencil-esm/242009)
**Author:** [@fredppro](https://forum.ionicframework.com/u/fredppro)\ **Replies:** 0\ **Last updated:** [May 24, 2024, 3:18pm UTC](https://forum.ionicframework.com/t/jest-stencil-esm/242009 "2024-05-24T15:18:04Z")
I need help configuring Jest in my stencil application. Currently i’m building a Design System in which i use: Typescript; Sholeace (a web component library); Jest for unit testing. Project structure (monorepo with np… --- ## [Testing Stencil Components with Ease using Playwright](https://forum.ionicframework.com/t/testing-stencil-components-with-ease-using-playwright/241602)
**Author:** [@system](https://forum.ionicframework.com/u/system)\ **Replies:** 0\ **Last updated:** [May 9, 2024, 2:20pm UTC](https://forum.ionicframework.com/t/testing-stencil-components-with-ease-using-playwright/241602 "2024-05-09T14:20:57Z")
Originally published at: Testing Stencil Components with Ease using Playwright - Ionic Blog We’ve also expanded support for another testing tool: Playwright! --- ## [Inquiry About Stenciljs.com Source Code for Educational Purposes](https://forum.ionicframework.com/t/inquiry-about-stenciljs-com-source-code-for-educational-purposes/237911)
**Author:** [@btheanh174](https://forum.ionicframework.com/u/btheanh174)\ **Replies:** 3\ **Last updated:** [May 9, 2024, 11:12am UTC](https://forum.ionicframework.com/t/inquiry-about-stenciljs-com-source-code-for-educational-purposes/237911 "2024-05-09T11:12:11Z")
Hello I hope this email finds you well. My name is The Anh, and I am writing to express my admiration for the work you have done on your homepage at stenciljs.com. It’s evident that your team has skillfully utilized the… --- ## [Dist-custom-elements, single-export-module and globalScript](https://forum.ionicframework.com/t/dist-custom-elements-single-export-module-and-globalscript/240989)
**Author:** [@0m4r0](https://forum.ionicframework.com/u/0m4r0)\ **Replies:** 0\ **Last updated:** [April 16, 2024, 1:39pm UTC](https://forum.ionicframework.com/t/dist-custom-elements-single-export-module-and-globalscript/240989 "2024-04-16T13:39:52Z")
I am trying to use the below snippet of code to have a one single file exported (and try avoiding lazy loading). All seems to work as it should, but the code set to the globalScript key does not seem to be executed. I a… --- ## [Testing Stencil Components with Ease using WebdriverIO](https://forum.ionicframework.com/t/testing-stencil-components-with-ease-using-webdriverio/240879)
**Author:** [@netkow](https://forum.ionicframework.com/u/netkow)\ **Replies:** 0\ **Last updated:** [April 11, 2024, 4:00pm UTC](https://forum.ionicframework.com/t/testing-stencil-components-with-ease-using-webdriverio/240879 "2024-04-11T16:00:14Z")
Originally published at: Testing Stencil Components with Ease using WebdriverIO - Ionic Blog Over the past few months, the Stencil team has been working to expand the testing tools we support. First up is WebdriverIO… --- ## [I have duplicated my frontend project and before everything wroking well](https://forum.ionicframework.com/t/i-have-duplicated-my-frontend-project-and-before-everything-wroking-well/240817)
**Author:** [@Hollyghost-dev](https://forum.ionicframework.com/u/Hollyghost-dev)\ **Replies:** 1\ **Last updated:** [April 8, 2024, 1:55pm UTC](https://forum.ionicframework.com/t/i-have-duplicated-my-frontend-project-and-before-everything-wroking-well/240817 "2024-04-08T13:55:21Z")
I have this error :error: node\_modules/@stencil/core/internal/client/index.js: node\_modules/@stencil/core/internal/client/index.js:Invalid call at line 4038: import( /\* @vite-ignore \*/ I don’t understand why? --- ## [Eslint-flat-config and @stencil-community/eslint-plugin](https://forum.ionicframework.com/t/eslint-flat-config-and-stencil-community-eslint-plugin/240513)
**Author:** [@cl10k](https://forum.ionicframework.com/u/cl10k)\ **Replies:** 0\ **Last updated:** [March 25, 2024, 11:31am UTC](https://forum.ionicframework.com/t/eslint-flat-config-and-stencil-community-eslint-plugin/240513 "2024-03-25T11:31:22Z")
Hi :slight\_smile: Did anybody succeed in adding @stencil-community/eslint-plugin to the new eslint-flat-config? As I understand it, you need @eslint/eslintrc - FlatCompat to integrate ‘legacy’ plugins into the new fil… --- ## [Next.js SSR (Pages Router) with CSP](https://forum.ionicframework.com/t/next-js-ssr-pages-router-with-csp/239936)
**Author:** [@reneschubert](https://forum.ionicframework.com/u/reneschubert)\ **Replies:** 0\ **Last updated:** [February 26, 2024, 9:02am UTC](https://forum.ionicframework.com/t/next-js-ssr-pages-router-with-csp/239936 "2024-02-26T09:02:01Z")
I’m experiencing issues with Stencil when I try to set up a Content Security Policy Response Header with nonces in my Next.js (v14) project. I’m using the pages router, because there seems to be no easy way to add "use c… --- ## [Bundle selected StencilJS components?](https://forum.ionicframework.com/t/bundle-selected-stenciljs-components/210765)
**Author:** [@rutwick](https://forum.ionicframework.com/u/rutwick)\ **Replies:** 1\ **Last updated:** [February 12, 2024, 4:18pm UTC](https://forum.ionicframework.com/t/bundle-selected-stenciljs-components/210765 "2024-02-12T16:18:40Z")
I have a StencilJS library of 50 components, that I ship as a node module to be used in a project. I have come across a situation where I only want 10 of these for a different project. Is there a way to choose or maybe d… --- ## [All in one bundle](https://forum.ionicframework.com/t/all-in-one-bundle/239657)
**Author:** [@gilmith](https://forum.ionicframework.com/u/gilmith)\ **Replies:** 0\ **Last updated:** [February 12, 2024, 4:00pm UTC](https://forum.ionicframework.com/t/all-in-one-bundle/239657 "2024-02-12T16:00:39Z")
Hello, I’m trying, without sucess, to create an all in one bundle with my stenciljs project js. Is it possible with stencil? I’d tried with webpack and stenciljs.config.js with dist-custom-elements bundle --- ## [Stencil build started to generate components with \_2 prefix at the end of the component name](https://forum.ionicframework.com/t/stencil-build-started-to-generate-components-with-2-prefix-at-the-end-of-the-component-name/239219)
**Author:** [@vitto](https://forum.ionicframework.com/u/vitto)\ **Replies:** 0\ **Last updated:** [January 22, 2024, 4:15pm UTC](https://forum.ionicframework.com/t/stencil-build-started-to-generate-components-with-2-prefix-at-the-end-of-the-component-name/239219 "2024-01-22T16:15:41Z")
Probably there is a specific reason I just miss, when I launch the build command everything is build without errors. Some of the components are named different, probably depending by some reason i ignore: Maybe it’s… --- ## [How to use Stenciljs with testing-library](https://forum.ionicframework.com/t/how-to-use-stenciljs-with-testing-library/239236)
**Author:** [@bfancher-marqeta](https://forum.ionicframework.com/u/bfancher-marqeta)\ **Replies:** 0\ **Last updated:** [January 23, 2024, 5:04am UTC](https://forum.ionicframework.com/t/how-to-use-stenciljs-with-testing-library/239236 "2024-01-23T05:04:18Z")
Hi folks, I’ve scoured the web and trying to figure out how to use Stenciljs with testing library. Anybody have any insights here? I’m not using react, just stenciljs and would like to use testing-library to keep our … --- ## [How to export shared methods/class in stenciljs?](https://forum.ionicframework.com/t/how-to-export-shared-methods-class-in-stenciljs/238668)
**Author:** [@huyit88](https://forum.ionicframework.com/u/huyit88)\ **Replies:** 0\ **Last updated:** [December 25, 2023, 10:39am UTC](https://forum.ionicframework.com/t/how-to-export-shared-methods-class-in-stenciljs/238668 "2023-12-25T10:39:35Z")
Hi Team, I want to publish my shared method in the library which is build by stenciljs then other developer can reuse it. I research on stencilj website and forum, but not find any topic. With stackoverflow, i found f… [Next page](https://forum.ionicframework.com/c/stencil/21.md?page=1)