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
8
votes
3 answers

Stenciljs @Method not working

I'm struggling to get @Method in stenciljs working - any help would be appreciated. Here's my component code with a function called setName that I want to expose on my component: import { Component, Prop, Method, State } from…
Carl Rippon
  • 4,553
  • 8
  • 49
  • 64
8
votes
3 answers

Will StencilJS be available as a development option in Ionic?

I wonder if Stencil JS will be adopted as an option for developing mobile apps in Ionic. Let me explane what I mean by "an option for developing". In other frameworks like NativeScript, you can choose to start a new project with Angular + Typescript…
F.Ricceri
  • 333
  • 1
  • 9
7
votes
2 answers

How to use an external third party library in Stencil.js

I have a Stencil component and, as part of its business logic, I need to use an external Javascript file mylib.js. The Javascript file contains some business logic the Stencil component should use. Here's my component: import { Component, Element,…
Gianluca Ghettini
  • 11,129
  • 19
  • 93
  • 159
7
votes
1 answer

Style host element on Stencil component based on class

In Stencil when you have set shadow: true, styling the host element is as follows :host { color: red; } This works. But now I have the following component @Component({ tag: 'my-component', styleUrl: 'my-component.scss', shadow:…
Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333
7
votes
2 answers

http requests in stenciljs

How can I make http requests (GET / POST / PUT / DELETE) in StencilJS? I tried using axios as follows: Did npm install axios --save and in the stencil component import axios from 'axios';. As soon as I call axios.get(...)I get the following error…
Andi Erni
  • 563
  • 7
  • 16
6
votes
1 answer

Hydration issue when using StencilJS webcomponents in NextJS

I'm trying to get my custom formfield to play nicely with NextJS. But there seems to be an issue with the hydration. This is my webcomponent: @Component({ tag: 'test-checkbox', shadow: false, }) export class TestCheckbox { @Prop() name:…
PixelRepublik
  • 61
  • 5
6
votes
1 answer

VueJS slots not working with Stencil JS components?

I have a Vue 3 application, and a StencilJS component library. One of my Stencil components used a default slot earlier, and it worked well with Vue. Now I introduced named slots in my Stencil component, but the named slots aren't working from Vue…
Rutwick Gangurde
  • 4,772
  • 11
  • 53
  • 87
6
votes
3 answers

Visual Studio Intellisense for custom web components

I have some web components custom elements, in this case built with StencilJS. They are installed into my solution via an npm package and then included globally in a layout via a script tag. How can I get Visual Studio to know about these elements…
elwyn
  • 10,360
  • 11
  • 42
  • 52
6
votes
3 answers

Change CSS class on click in Stenciljs

Is it possible to use the simple menu animation from W3School in Stencil.js? https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js I'm trying to set the styling on a click event, but I can't make it work. The event is fireing…
Johan Byrén
  • 890
  • 2
  • 13
  • 28
6
votes
2 answers

Jest throwing TypeError : this.inputEl.focus is not a function #1964

Stencil version: @stencil/core@1.7.0 Jest version: "jest": "24.8.0" Current behavior: I am trying to focus a input element on button click. Which works fine, however upon trying to test the functionality using npm test , jest throws a…
VoidZero
  • 480
  • 2
  • 6
  • 23
6
votes
0 answers

Access StencilJS component assets in React

I have a Stencil component using its own assets (images). After I build and publish to npm and install the package in my React app, the assets in the Stencil component won't work anymore. React tries to find them in the public folder but they are…
KisMiska
  • 61
  • 2
6
votes
3 answers

Font Awesome doesn't work inside of a Stencil JS component

Stencil version: @stencil/core@1.3.0 I want to use Font Awesome inside my Stencil component. I followed these steps from https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers Create a "Stencil component starter" project Install…
JEricaM
  • 794
  • 2
  • 15
  • 37
6
votes
2 answers

Bundling stencil component with webpack

Do anyone know how to bundling the web component created with stencil using webpack. I have multiple stencil components and need to create a bundle so that i can use it in other projects.
sijo jose
  • 197
  • 1
  • 12
6
votes
2 answers

StencilJS check if named slot is empty

I have a stencilJS component with two named slots. Is there a way to determine if the slots have been assigned values? For instance, the code snippet below show named slots for "logo" and "menu." How can I check inside the component if both named…
bresson
  • 831
  • 11
  • 20
6
votes
0 answers

How to use StencilJs Components in React Native

First, sorry for my bad english. Well... I'm working on a UI Lib using stencilJs and in another project I'm using react-native-web to make easier my web and mobile dev... But my custom component that I've created in stencilJS project only works on…
Igor De Assis Pires
  • 71
  • 4
1
2
3
…
47 48