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 can I check if an unnamed slot is empty with StencilJS?

This is how I would use my component Hello world I'd like to avoid to pass a slot named html fragment to my component every time Hello…
vitto
  • 19,094
  • 31
  • 91
  • 130
3
votes
2 answers

How to mock stencil web components by using react testing library?

I've created a separate web component library using Stenicljs and used it in React application, While writing test cases realized that events are not working as expected. I've tried to mock the component but was not able to figure out the proper way…
venky royal
  • 1,860
  • 2
  • 11
  • 19
3
votes
2 answers

Bundle stencil.js into single file

I'm trying to use a stencil web-component in a system that requires a single js file. To be more precise, this is because the target system will take all javascript files and bundle them regardless. When i add the ES6 javascript files, this throws…
nipoma3298
  • 43
  • 4
3
votes
0 answers

Stencil, external libary, require is not defined, how to fix?

I am trying to use OpenTelemetry library along with Stencil. After version 0.19 they started to use require() for the imports of some internal dependencies. Stencil does not support require. So app fails on require is not defined. My question is -…
Sh. Pavel
  • 1,584
  • 15
  • 28
3
votes
1 answer

Adding element to youtube

I am trying to add this custom element to YouTube. at first, I wrote in the console: const script1 = document.createElement("script") script1.type = "module" script1.src =…
israelk
  • 61
  • 5
3
votes
1 answer

StencilJs does not generate app-global and index files in production build

I am trying to generate a production build in StencilJs using the command "npm run build". One of the generated js files in www build folder has imports of index-0e699d98.js and app-globals-320636ef.js. But these files are not present anywhere in…
Agrata
  • 31
  • 2
3
votes
0 answers

How to use sass @use in stenciljs? Known issue?

In my component's scss file, I am trying to use other scss files. I thus wrote the following as the first statements in my component's scss file (before anything else): @use './_one.scss'; @use './_two.scss'; However, when I run the dev server, I…
joe42
  • 31
  • 2
3
votes
0 answers

Stencil: Mock a Method Call / specific function

Should be the latest stencil version Date 15.02.: When running a spec-test, the test can't be run because it fails at: MockHTMLElement is missing assignedElements() method The spec-test is currently written as follows: import { newSpecPage } from…
Tony B
  • 344
  • 5
  • 19
3
votes
2 answers

What causes "assignedElements is not a function" in this Stencil.js Jest test?

I am getting an error in Jest test cases that says assignedElements is not a function. In the code, I am trying to query slots and then fetch the value as mentioned below: let slot = this.element.shadowRoot?.querySelector('slot'); const testItems =…
Sahil Singh
  • 31
  • 2
3
votes
2 answers

Stencil JS - Initiate a State variable with a Prop value?

In my Stencil component, I want to initiate my state variable with the passed down prop value. How to do that in Stencil? I have tried assigning the value to the state var in componentWillLoad, but it doesn't work. @Prop() passedVal @State() someVal…
Rutwick Gangurde
  • 4,772
  • 11
  • 53
  • 87
3
votes
2 answers

How to get text content of slot?

We can have stencilJS element with slot as below 123 I'm trying to get the value of 123 from my render method itself, wondering if that is possible? @Component({ tag: 'my-component' }) export class MyComponent { …
Isaac
  • 12,042
  • 16
  • 52
  • 116
3
votes
1 answer

How can I create a custom input element in Stencil to work with Angular/Ionic?

I have a massive headache trying to figure this out. I am wanting to create a custom input element I can use in my Angular/Ionic application. How can I use Angular attributes with these custom elements, like FormControlName for…
Hayden
  • 779
  • 10
  • 18
3
votes
0 answers

Focus input inside stencil web-component from outside

Is it possible to propagate a focus() call on the html element of a web-component to its children (input)? The web-component contains an input: render() { return (
); } I…
maidi
  • 3,219
  • 6
  • 27
  • 55
3
votes
1 answer

Jest Test on Stencil Component does not apply changes in variables

I want to test a stencil component and configure a global variable in my test like this: describe('my-component', () => { const myVarMock = 1; let page; let shadowRoot: ShadowRoot; beforeEach(async () => { page = await newSpecPage({ …
maidi
  • 3,219
  • 6
  • 27
  • 55
3
votes
1 answer

How to add an npm package inside stencil js project?

I am creating a stencil project which uses an npm package inside it, is there any options to add an npm package inside stencil project. Any suggestions I searching for a solution for quite a while. This is how i use ck-editor in angular
Vishnu Shenoy
  • 862
  • 5
  • 18
1 2 3
…
47 48