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

How does the Shadow DOM effect component lifecycle methods in stenciljs

I am trying to understand how using the Shadow DOM effects a components lifecycle methods in Stenciljs. I have set up the following example in a Stencil starter app. …
r2207
  • 41
  • 2
4
votes
1 answer

stenciljs conditional render return in tsx

my stenciljs render function is currently written in typescript this way: render() { if( this._isInline ) { return ( ); } else { return (
); …
Marek Krzeminski
  • 1,308
  • 3
  • 15
  • 40
4
votes
1 answer

How do I include an arbitrary module/file in my stenciljs build?

I'm creating a component library with a tooltip component. I want to provide users of my package with the ability to import a service that I've created. Basically I want the API to look something like this: import { defineCustomElements,…
ccnokes
  • 6,885
  • 5
  • 47
  • 54
4
votes
2 answers

ion-label component inside the stencil-component-starter not getting rendered

I cloned the stencil-component-starter from: https://github.com/ionic-team/stencil-component-starter Then on the file: my-component.tsx I have the following code: import { Component, Prop } from '@stencil/core'; @Component({ tag: 'my-component', …
davidesp
  • 3,743
  • 10
  • 39
  • 77
4
votes
1 answer

Passing custom template to stencil component

I'm working on to create a custom component using Stencil to replicate UI-select. The component will be used like: let items = [{name:"Abc", age: 10}, {name:"Xyz", age: 10}]; let itemString = JSON.stringify(items);
Indranil Mondal
  • 2,799
  • 3
  • 25
  • 40
4
votes
4 answers

Stenciljs CSS global variables

I am unable to get global css variables working as described in the ionic stencil docs. I created a 'variables.css' file in 'src/global/', then put "globalStyle: 'src/global/variables.css'" into the "stencil.config.ts" file. I then created a set of…
Michael Riess
  • 75
  • 1
  • 8
4
votes
1 answer

Angular: combining Applications but developed as separate Projects

I would like to know if the following is possible with Angular 6 (note that where I use the term "subsystems" it's similar to Angular's "Applications") The purpose is to create a unified view of otherwise separate subsystem web sites. I was able…
Various Artist
  • 357
  • 5
  • 16
4
votes
2 answers

Create all-in-one bundle?

I'd like to know if it's possible to create an all-in-one.js bundle, which includes all components, so it wouldn't be necessary to load other script tags. My config: exports.config = { srcDir: "./webcomponents", outputTargets: [ { …
kraftwer1
  • 5,253
  • 10
  • 36
  • 54
4
votes
3 answers

Navigation with new Ionic (version 4)

Up to Ionic3, it was closely packed with Angular.js. So probably the navigation jobs were done by some Angular.js functionality. I can be wrong since I have not worked with Ionic or Angular.js before. Ionic4 will be framework agnostic, written with…
sçuçu
  • 2,960
  • 2
  • 33
  • 60
4
votes
1 answer

How Nested Components Works in Stencil?

I found These Snippets in Stencil's Official Docs. I am not able to understand how my-embedded-component is accessible in my-parent-component without providing the path of child component. Can anyone help me understand this concept? Child…
Abhishek Gangwar
  • 2,168
  • 18
  • 26
3
votes
1 answer

ERR_ABORTED 504 (Gateway Timeout) while importing a Stencil library in Vite in a Vue application

I am trying to import a custom web component from a web component library built with StencilJS in my Vue application created with Vite (version 4.0.4). This is the code in my main.js file: import { createApp } from 'vue'; import App from…
arnab4477
  • 31
  • 1
  • 3
3
votes
1 answer

How to import JavaScript file into a Stencil component?

What is the JavaScript equivalent to styleUrl? For importing CSS, it's: @Component({ tag: 'my-random-component', styleUrl: '../../index.scss', shadow: true }) What if I want to import JavaScript instead? I could not find anything about…
happy_story
  • 1
  • 1
  • 7
  • 17
3
votes
2 answers

Unable to load stencil components lib with Vue3 using Vite

I created a sample project to reproduce this issue: https://github.com/splanard/vue3-vite-web-components I initialized a vue3 project using npm init vue@latest, as recommanded in the official documentation. Then I installed Scale, a stencil-built…
Eria
  • 2,653
  • 6
  • 29
  • 56
3
votes
2 answers

Jest Expected and receive are identical

Is there a reason why Jest would see this as a not identical when both seem exactly the same? So here is the code I am using to do the test, it's basically just a function that calls for an event emiter, in the event emiter if the date is invalid, I…
Steven
  • 817
  • 1
  • 8
  • 25
3
votes
0 answers

Integrating atlasmap-2.3.5 (React) into Angular12

Bit challenging to find a solution for integrating react application into Angular app. Broadly there are 2 pieces in whole work first Atlasmap ( Open source) and Angular.I am working on integrating Atlasmap in Angular 12. Atlasmap is an open source…
Pranavjeet.Mishra
  • 158
  • 1
  • 12
1 2 3
…
47 48