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
37
votes
4 answers

How Stencil is different from React and Angular?

I am familiar with Angular and know basics of React. I was exploring stencil docs, I found stencil component has both @Component decorator and render() method - component.tsx import { Component, Prop } from '@stencil/core'; @Component({ tag:…
Swapnil Patwa
  • 4,069
  • 3
  • 25
  • 37
22
votes
6 answers

Ionic4 component - Menu: must have a 'content' element to listen for drag events on

I have the following code: Ionic 4 - Menu
davidesp
  • 3,743
  • 10
  • 39
  • 77
21
votes
5 answers

Jest Mock IntersectionObserver

I have the following method: componentDidLoad() { this.image = this.element.shadowRoot.querySelector('.lazy-img'); this.observeImage(); } observeImage = () => { if ('IntersectionObserver' in window) { …
Jean
  • 5,201
  • 11
  • 51
  • 87
21
votes
2 answers

Web components: How to work with children?

I'm currently experimenting with StencilJS to create some web components. Now I know that there is and named slots and all that stuff. Coming from React, I guess slot is similar to children in React. You can do a lot of stuff using children…
Schadenn
  • 854
  • 1
  • 9
  • 20
18
votes
3 answers

How to Embed StencilJS components inside Storybook React App?

I'm trying to integrate Stencil and Storybook inside the same project. I've been following this set up guide and this one however one of the steps is to publish the library of components to NPM and that's not what I want. I have this repo which I've…
César Alberca
  • 2,321
  • 2
  • 20
  • 32
15
votes
2 answers

How to change emmet expanding "className" to "class" in VSCode for JSX/TSX?

In stencil's.js TSX elements attribute for the class selector is the class instead of className (as in React). Can't find a way in VSCode to change the class attribute's name for emmet's expansion. Tried preferences for emmet, but it doesn't…
Babchenko Nikolay
  • 151
  • 2
  • 5
14
votes
2 answers

Binding value as html in stenciljs

I am having trouble rendering a value with custom html inside into an element. ex: this.title = 'Hello stencil '; << response value from an API Binding:

{this.title}

I am expecting something same as innerHtml behavior in…
Mohamad Al Asmar
  • 1,107
  • 1
  • 16
  • 35
10
votes
2 answers

What framework to use in order to build web components: lit-element vs stencil vs SkateJS?

I want to start leveraging http://webcomponents.me W3C standard which is now supported by all major web browsers. I researched the internet and so far I found following frameworks: Stencil - Created by ionic. All ionic components use this…
Danilo Puric
  • 779
  • 2
  • 13
  • 23
10
votes
2 answers

stencil is not rerendeing component when @state() decorated property is changed

I started with stencil today. Following code is all I have in my project. Docs say, if Component member decorated with @state() is changed, component will rerender. Any changes to a @State() property will cause the components render function to be…
asdasd
  • 6,050
  • 3
  • 14
  • 32
10
votes
3 answers

Stenciljs: dynamically load styleUrl

I'm building a web component with stenciljs and i want to be able to load the css theme file based on the proprety called theme. @Component({ tag: 'pm-header', styleUrl: 'pm-header.scss', shadow: true }) export class PmHeader { @Prop()…
malek yahyaoui
  • 379
  • 3
  • 17
10
votes
3 answers

How to get a DOM element in Stenciljs?

import { Component, Prop } from '@stencil/core'; @Component({ tag: 'my-component', styleUrl: 'my-component.css', shadow: true }) export class MyComponent { @Prop() first: string; @Prop() last: string; getElementHere() { //…
SmallMan
  • 144
  • 1
  • 2
  • 11
9
votes
3 answers

How to use SSR with Stencil in a Nuxt 3 Vite project?

In Nuxt 2 I could use server-side rendered Stencil components by leveraging the renderToString() method provided in the Stencil package in combination with a Nuxt hook, like this: import { renderToString } from '[my-components]/dist-hydrate' export…
Thijs
  • 568
  • 6
  • 16
9
votes
2 answers

Stencil: Namespacing custom elements’ names to avoid collisions

Our platform is built on a micro-frontend architecture with web components. We are using Stencil for some of them, this means we have multiple Stencil apps within one web page. Additionally, we have a UI library, also built with Stencil, which we…
lxg
  • 12,375
  • 12
  • 51
  • 73
9
votes
3 answers

@types/jest index.d.ts file returning error

I just npm installed @types/jest to my stenciljs starter app and now, when I go to start my project the newly installed node package is returning several errors. Here are the errors it's returning when I go to npm start my project: [ ERROR ] …
cashews
  • 161
  • 1
  • 3
  • 9
9
votes
6 answers

VSCode debugger not working in Jest tests

I'm struggling to get the Visual Studio Code debugger working in with Jest tests. Here is my launch.json: { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Jest All", "program":…
Carl Rippon
  • 4,553
  • 8
  • 49
  • 64
1
2 3
…
47 48