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
3
votes
1 answer

Is it possible to lazy render component in StencilJS?

As you want to build complex component, it would be great if you can wrap any DOM with component such as "lazy-load" component with condition (@Prop() condition: boolean) so to illustrate what I want:
tomokat
  • 142
  • 1
  • 8
3
votes
1 answer

StencilJS - Insert element in body instead of component

I'm building a component in StencilJS which has a tooltip. I would like to append this tooltip's markup in the document.body instead of my component, as it runs into issues when the component is wrapped in an element with overflow:hidden (the…
janarvaez
  • 33
  • 4
3
votes
1 answer

Rendering React component from inside StencilJS component and mapping slot to props.children

I would like to wrap an existing React component inside a StencilJS component. I have a kinda mvp thing working by calling ReactDom.render inside the StencilJS componentDidRender hook and after rendering moving the into the react child element,…
elwyn
  • 10,360
  • 11
  • 42
  • 52
3
votes
2 answers

StencilJS: Missing "h" import for JSX types

I am trying to create a web component using the stencil and while using the h1 tag inside TSX file I get below error: [ ERROR ] Missing "h" import for JSX types: ./src/components/side-drawer/side-drawer.tsx:1:19 In order to load accurate…
Varun Sukheja
  • 6,170
  • 5
  • 51
  • 93
3
votes
2 answers

Ho do I add common css for stenciljs web-components

I am creating bunch of web-components, not sure how do I create common css for stenciljs web-components. Based on documentation I can add globalStyle: 'src/global/app.css', But it seems i can only share css variables. e.g. :root { --font_color:…
Ankur Soni
  • 746
  • 6
  • 17
3
votes
4 answers

Is there a way to integrate stencil components into frameworks locally without publishing to NPM?

I am currently testing stencil js. For now I want to write stencil components and include them within a VUE/React project. The official website of stencil already shows how to integrate them within a framework (https://stenciljs.com/docs/overview).…
JonathanF
  • 33
  • 1
  • 4
3
votes
1 answer

Stencil.js: How to use utils function in index.html

i'm creating a popup stenciljs component. File structure: popup-element src utils popup-manager components popup-element popup-element.tsx index.html ... Now i try to insert component to DOM from function: popup-manager.ts export…
Nikolay Stepin
  • 61
  • 1
  • 3
3
votes
1 answer

Stenciljs and Jest. Unexpected token "export"

I have the next environment working with Yarn workspaces: System: OS: macOS Mojave 10.14.6 CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz Binaries: Node: 12.14.1 - /usr/local/bin/node Yarn: 1.21.1 - /usr/local/bin/yarn …
Luis
  • 2,006
  • 5
  • 31
  • 47
3
votes
1 answer

How to share state between StencilJS components

I would like to share state between my StencilJS components. So I checked out the Redux implementation which they promote on their API site. It does something like @Prop({ context: "store" }) store: Store; But now I just red the BREAKING_CHANGES,…
Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333
3
votes
2 answers

Stenciljs: Cannot find another component

I have created a new project in Stenciljs, but I have a problem using the components created in that project. import { Component, h, Prop } from '@stencil/core'; @Component({ tag: 'fd-story', styleUrl: './story.css', shadow:…
Luis
  • 2,006
  • 5
  • 31
  • 47
3
votes
2 answers

StencilJS JSX use ref in as a Prop

I'm currently writing a StencilJS component with a ref to a element, which I need to pass as a @Prop to another element. Like so: this.canvas = el}> When the color…
Elger van Boxtel
  • 1,030
  • 12
  • 23
3
votes
1 answer

Pass data to the slots in Stenciljs

I'm creating some sort of universal component to use it in React projects and in some old-fashioned Bootstrap + PHP ones. So, I have a design like this. As you can see it has repeated parts on the left and right sides. And I'm wondering to make it…
Ivan Burnaev
  • 2,690
  • 18
  • 27
3
votes
2 answers

Array of Objects Prop Decorator StencilJS

I want to pass an array of objects and then iterate through the array and render each object. I have the following my html file:
Mandalina
  • 446
  • 5
  • 22
3
votes
0 answers

How can I test Ionic 4 components (Stencil)

I'm trying to test the newly rewritten Ionic 4 components (written with StencilJS) and Angular TestBed. Those components are internally using shadowDOM, so there's no way to access the internal element e.g. for the following…
Alex Arvanitidis
  • 4,403
  • 6
  • 26
  • 36
3
votes
0 answers

storybook is not loading stencil web component css file after upgrading the stencil core

I'm having issues to load css files in storybok after upgrading the stencil core. .strorybook.webpack.config.ts is the fellowing : const path = require('path'); const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = (baseConfig,…
doubleCH
  • 41
  • 3
1 2 3
…
47 48