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.
stenciljs
776
questions
0
votes
1
answer
19
views
Configuration composent testing Cypress with StencilJS? [closed]
how to configure component testing with Cypress in a project using the StencilJS framework?
Cypress : v13
I was inspired by the configuration examples with the React and Angular framework, but ...
- 1
0
votes
1
answer
24
views
Error Consuming a StencilJS Component Library inside NextJS
I have a StencilJS component library I'm self hosting on GitLab. It's a private repo.
I'm able to consume it within regular HTML, however I would like to use the StencilJS Web Components within a ...
- 11
0
votes
0
answers
14
views
using variables and/or async variables in stenciljs @component decorator
I'm not even sure if this is technically possible, let alone advisable, but thought I'd ask.
Is it possible to use variables or the result of functions in a stenciljs @Component decorator?
What I'm ...
- 585
1
vote
1
answer
59
views
Glitchy Scroll Behavior on Mozilla Firefox Browser
I'm creating a header component with stencil.js framework, the header have a normal state and an isScroll state which changed on scroll.
The issue is that when I scroll the header becomes jumpy and ...
- 11
0
votes
1
answer
47
views
How to add a nav link in the section "My account"
I was trying to add a new link to navbar in my account, I added a new item to navbar beside
Account Settings.
But I am unable to set a link to it using like {{urls.account.cards}}. How i implemented ...
0
votes
0
answers
21
views
Getting `ReferenceError` while pre-rendering in StencilJS
I'm developing a webapp with StencilJS (using the native router and store). The build works fine with stencil build but throws an error when I try to pre-render using stencil build --prerender
Here is ...
- 11
0
votes
1
answer
88
views
StencilJS unable to get Angular Standalone library to build
I'm working on projects relying on Angular16+ with only standalone components.
So I expect to build angular standalone components library out of my Web Components library, to be used in my projects.
...
- 1
0
votes
0
answers
59
views
After successfully running my Storybook project on localhost in some time later I get the Error
[The error I am getting after running my storybook stencil project, Once I do npm start to run storybook it gives the localhost link but after some time it breaks and gives the error shown in image I ...
1
vote
0
answers
28
views
Render native node in JSX/TSX - StencilJS
I am currently facing the following problem:
I have a table component (consisting of CustomBody, CustomHead etc.)
Dummy markup:
<custom-table>
<custom-table-head>
....
</...
- 33
0
votes
0
answers
32
views
How to trigger custom events during Stencil e2e tests?
I have that Stencil component:
@Component({
tag: 'my-component',
styleUrl: 'root.css',
shadow: true
})
export class MyComponent {
handleUploadedFile(event: CustomEvent): void {
console.log(...
0
votes
0
answers
30
views
Stencil dispose store causes tests timeout
I have a very simple Stencil component:
export class MyApp{
render() {
return (
<Host>
<h1>{state.projectName}</h1>
</Host>
);
}
}
That uses a ...
0
votes
0
answers
65
views
React onClick Events on Stencil Generated Buttons Inside Parent Stencil Component
I created a custom button on StencilJS and I am using on a React app.
I can assign an method to the onClick attr of my custom button and it works fine.
There is a problem however when I use my custom ...
- 4,454
0
votes
1
answer
24
views
svg color does not change in scoped css stenciljs
I am trying to change the color of the svg in document.addclass method to customize the color.When i added the color in class after compilation it didn't reflect it.
For example: I have mentioned ...
- 345
0
votes
0
answers
36
views
How to simulate a file upload during tests?
I have a Stencil component which allows to upload a file:
@Component({
tag: 'app-file-import',
styleUrl: 'file-import.css',
shadow: true
})
export class AppFileImport {
importFile(event: any): ...
0
votes
1
answer
67
views
How to test disabled attribute of a button?
I have a simple stencil component like this:
@Component({
tag: 'app-filled-button',
styleUrl: 'filled-button.css',
shadow: true,
})
export class FilledButton {
@Prop() disabled: boolean;
...