Stack Overflow
Stack Overflow

Questions tagged [stenciljs]

Stencil is a compiler created by the Ionic Framework team that generates Web Components (more specifically, Custom Elements). Stencil combines the best concepts of the most popular frameworks into a simple build-time tool.

Features and Benefits:

  • Virtual DOM
  • Async rendering (inspired by React Fiber)
  • Reactive data-binding
  • TypeScript
  • JSX

Official pages:

716 questions
4
votes
1 answer

In Stencil with Jest, how to test object property on components using template?

I have a stencil component that looks something like this: export class MyBadge { @Prop() skin: string = 'primary'; render(){ return ( ) I want to write a unit test that…
Itself
  • 75
  • 1
  • 7
4
votes
1 answer

Import Stencil JS library from another Stencil JS library

I have two libraries of Stencil JS web components, library-a and library-b. These are not apps, just separate npm packages of components. I would like to use some of the components from library-a inside library-b. How do I import components from A…
michaeljsalo
  • 523
  • 4
  • 16
4
votes
0 answers

how to bind value in my custom stencil component to the backend model in my asp.net page

At very beginning I was using the following code to pass value to my backend. Which Input is my…
guanhang
  • 41
  • 2
4
votes
0 answers

Stencil with React Conditional Rendering Issues

We're using a Stencil components library in our create-react-app to stay consistent with our digital guidelines. The components work great, most of the time... but anytime we try to conditionally render the children of the components or interact…
Adelbert Ames
  • 364
  • 1
  • 3
  • 8
4
votes
2 answers

TypeError: Cannot call a class as a function in stenciljs

I trying to use multiselect-react-dropdown package inside my stencil project, but while rendering I'm getting this error, I found many solution for react but nothing really worked, Can anyone help do same in stenciljs. import { Component, h, State }…
Vishnu Shenoy
  • 862
  • 5
  • 18
4
votes
2 answers

How can I make StencilJS component to render without component tag itself with TSX?

While I understand this is probably a terrible practice, I need to build StencilJS component such that inside render(), I don't want to render component tag itself due to already existing style guide and it expect DOM to be constructed in certain…
tomokat
  • 142
  • 1
  • 8
4
votes
0 answers

StencilJS Rendering nested componentes

I have created two web components that are nested together. The main problem that I am facing is when I try to render the child component, everything from the parent gets overlapped. I think that the issue is that both parent component and child…
Gastón Arias
  • 39
  • 4
4
votes
2 answers

How to use Stencil's `EventEmitter` inside React JSX?

I created an Input web component with Stencil: ... export class Input { @Prop({ mutable: true }) value: string; @Event() changed: EventEmitter; private handleChange (e) { this.value = e.target?.value; …
Mammad Mammadli
  • 310
  • 1
  • 2
  • 9
4
votes
0 answers

How to keep scroll position while loading content by scrolling to top in StencilJS?

I am building a chat app using stencilJS. I have a chat screen which displays chat messages where user can scroll to top to load older chat messages. Issue is whenever older chat loads scroll position is shift to top then I have to reset it to It's…
Deepak
  • 1,030
  • 2
  • 10
  • 21
4
votes
0 answers

What is the purpose of created folders in dist/ folder in StencilJS?

I am working with web components using stenciljs. Its great library for creating web components that can we re-use anywhere.I wondered how stencil compiler works. I mean when I create a build of any component its creating multiple folders inside…
Kishan Oza
  • 1,707
  • 1
  • 16
  • 38
4
votes
1 answer

How to make Stencil & Angular Universal work

I want to make SSR in my Angular app by using Angular Universal. The SSR work but Web-Components made with Stencil are not rendered (does not work when JS is disabled). LitElement and Vanilla JS web components doesn't work either. I have found that…
Guillaume M
  • 161
  • 6
4
votes
0 answers

How to import a stenciljs component into another project configured with require?

I've developed a sample stencil component to use in my existing project and it has all dependencies loaded through require js. I'm unable to import to existing project. I've tried different configurations with module value amd, commonjs, and with…
San
  • 41
  • 2
4
votes
1 answer

MSAL how to read token's expiry date?

Do you have any idea if there is a way to check if token has expired in Msal (in order to know if should get the acquireTokenSilent or not) Thanks
Ile G
  • 71
  • 1
  • 3
4
votes
1 answer

How can I insert an image into a Web Component?

I'm trying to insert an image into a Web Component I'm building with Stencil. I'm getting 2 errors: AppLogo is declared but its value is never read. and Cannot find module ../assets/logo.svg. Directories: - src -- components --- app-header ----…
Aaron Benjamin
  • 1,291
  • 3
  • 18
  • 27
4
votes
1 answer

Replace https links with using stencil

I am facing a problem to replace the answer from api and format it properly answerFromAPI = "textword textword textword textword textword.\n\nFeel free to ask me questions from this site:\nhttps://google.com \n" I want to format and render it as…
Siddharth Thakor
  • 156
  • 3
  • 17
1 2 3
…
47 48