Questions tagged [stenciljs]

Stencil, developed by the skilled team at Ionic Framework, is a compiler that produces Web Components, specifically Custom Elements. This innovative tool merges top concepts from leading frameworks to create an easy-to-use build-time solution.

Having trouble accessing the boolean value of a webComponent Stenciljs input checkbox within an Angular Reactive form

When using my stenciljs input checkbox component in Angular inside a reactive form, I encounter an issue where the value received is inverted and stored as a string rather than a boolean. The console.log output seems correct, but the form group value is ...

Incorporate JavaScript Library into StencilJs Using TypeScript

Recently, I decided to incorporate a JavaScript library called Particles.js into my project. The process involved importing it and initializing it within my component: import { Component, h } from '@stencil/core'; import * as particlesJS from &a ...

Error encountered during Stenciljs project setup

I am attempting to start a fresh stenciljs project by using the command npm init stencil Upon executing the above command, I encounter this error https://i.stack.imgur.com/L7ke4.png Could someone kindly assist me in identifying what is causing the issue. ...

Displaying a React component within a StencilJS component and connecting the slot to props.children

Is there a way to embed an existing React component into a StencilJS component without the need for multiple wrapper elements and manual element manipulation? I have managed to make it work by using ReactDom.render inside the StencilJS componentDidRender ...

Error: Attempting to use a class as a function is not possible in stenciljs

While working on my Stencil project, I encountered an error when trying to use the multiselect-react-dropdown package. I have searched for solutions specifically for React but none of them seemed to work. Can anyone provide assistance on implementing thi ...

When running multiple tests, a stencil component utilizing a store may experience a loss of context

stencil store: 2.0.9 stencil core: 4.0.2 Issue at Hand In my current stencil test project, I have set up a basic store implementation. However, when I attempt to manipulate the store values and reset them in my test, the test loses its context and is una ...

Issue with Stenciljs custom event not triggering using @Listen decorator

I've been trying to grasp the workings of the custom event emitter. While my mouse events seem to be functioning properly, I'm encountering issues with the custom events. Despite emitting correctly, it appears that the listener is not capturing t ...

A guide to implementing the map function on Objects in Stencil

Passing data to a stencil component in index.html <app-root data="{<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d4d7d6f5d2d8d4dcd99bd6dad8">[email protected]</a>, <a href="/cdn-cgi/l/email-pro ...

Enclose this within Stencil.js components

Is there a more efficient way to utilize a nested "this" in a Stencil.js component? Currently, I find myself following this approach: render() { let thisNested = this; return <Host> {this.images ? this.imagesArray.map(fu ...

Access the global window variable from index.html within a Vue component

In my Vue project, I am incorporating an Stencil.js component in the following manner: index.html: <script type="module" src="https://xxxxxx.s3-eu-west-1.amazonaws.com/topbar.esm.js"> </script> <script> window.addEventLis ...

Definition of Stencil Component Method

I'm encountering an issue while developing a stencil.js web component. The error I'm facing is: (index):28 Uncaught TypeError: comp.hideDataPanel is not a function at HTMLDocument. ((index):28) My goal is to integrate my stencil component into a larg ...