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

How would one go about creating input masks in Stencil.JS web components?

I've been task with creating a styleguide for a company. We want to use web components so that components can be shared across all web platforms regardless of framework. As with many systems, there are sets of form elements that need to be created.…
user2808895
  • 438
  • 1
  • 6
  • 14
3
votes
3 answers

Run E2E tests in IDE or command line

I'm using Stencil.js to create a web component library and I'm heavily relying on E2E tests. As they're rather slow it becomes more and more cumbersome to run the entire test suite (using the Stencil.js CLI) while developing new components. However,…
Daniel
  • 874
  • 10
  • 31
3
votes
0 answers

Not able to do basic setup for ag-grid in stencil.js

I am not able to do the basic setup for the ag-grid in stencil web component framework. I am new in both ag-grid and stencil and ag-grid’s documentation is the worst and they say it is the best. All pun intended. package.json "dependencies": { …
Harshit Pareek
  • 167
  • 2
  • 9
3
votes
1 answer

How to test Stencil.js state change?

I'm trying to figure out how to test state change in a Stencil web component using jest. I'm new to testing in general and have found that you can you use Enzyme to test state change within React components but I haven't been able to figure out how…
Rob
  • 98
  • 2
  • 8
3
votes
1 answer

Stencil object properties are not set, when they provided through the HTML string

According to documentation, Stencil component's property myProperty @Prop({attribute: "my-prop"}) public myProperty?: object = {}; should be set by using this HTML code: But, instead,…
Alex
  • 4,621
  • 1
  • 20
  • 30
3
votes
1 answer

Stencil.js expect(element).toHaveClass('hydrated') ... what does this mean

In the "my-component.e2e.ts" test class created by Stencil.js "npm init stencil" we have a line expect(element).toHaveClass('hydrated'); I can guess what 'hydrated' means, but I cannot find any documentation for it or why I have to test for it. …
Safa Alai
  • 1,223
  • 1
  • 15
  • 27
3
votes
2 answers

Stencil.js renders slot content, event if the render() returns null

I have a Stencil.JS components: import {Component, Prop, h} from '@stencil/core'; @Component({ tag: 'my-comp', styleUrl: 'my-comp.css', // shadow: true }) export class MyComp { @Prop() active: boolean = false; render() { …
Alex
  • 4,621
  • 1
  • 20
  • 30
3
votes
0 answers

What is the correct way to dynamically update the elements of the slot?

I'm new in Web Component and Stencil. I have the menu with some items that change dynamically, when I try to add some menu item it shows in wrong place. my-menu.tsx render() { return (

Menu

    …
Nazar
  • 172
  • 1
  • 1
  • 8
3
votes
2 answers

How to inject a stencil's component inside a webpage using a chrome extension?

I have been exploring the possibility of injecting one or more stencil's web-component to any web-page on internet by using a chrome extension. However the lazy loading feature of stenciljs has turned out to be an obstacle in my case. In the first…
Bilal Alam
  • 874
  • 10
  • 26
3
votes
1 answer

StencilJS | Importing a third party script in a component

I am trying to use a third party script in a Stencil component which I copied into the build directory. I intend on using stand alone components on various websites. I am not building a Stencil app. stencil.config.ts export const config: Config = { …
Ciprian
  • 3,066
  • 9
  • 62
  • 98
3
votes
0 answers

Problem getting Cypress to play nice with StencilJS components

I am experiencing some flaky behavior with Cypress tests against my Angular application: they work fine when targeting my local box but when setting CYPRESS_BASE_URL to a remote machine running the same code, then some of the tests fail. I think I…
Michael Sorens
  • 35,361
  • 26
  • 116
  • 172
3
votes
3 answers

Jest does not resolve lodash imports

I'm writing a web component using StencilJS. One of the helper classes (ArrayHelper.ts) which is imported by my component has these import at the top: import transform from 'lodash/transform'; import isEmpty from 'lodash/isEmpty'; import isEqual…
Niels Boogaard
  • 116
  • 1
  • 5
3
votes
2 answers

StencilJS: compile scss and copy to dist folder

My goal is to provide a css file in the distribution package which can be used by the consumer if needed. For that I would like to create a kind of global scss file, but I want to avoid that this style is attached to each component + it also won't…
Ratan
  • 603
  • 6
  • 19
3
votes
1 answer

Using StencilJS components with another StencilJS component

my general question is, how can i use a stencil built component within another stencil component. Not in the PWA toolkit but in another Component. More specifically the component i want to use is not on npm, but on a private bitbucket repo. In its…
malua
  • 117
  • 11
3
votes
1 answer

Custom attribute / Directive in Stencil.js

Can anyone guide me about this? Can Stencil.js add Custom attribute / Directive like Aurelia/Angular to existing elements or not? I don't find any doc about this on their site. Only creating a new component nothing about extending existing…
HamedFathi
  • 3,667
  • 5
  • 32
  • 72
1 2 3
…
47 48