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
6
votes
4 answers

How to do SSR with stencil.js in a project with Nuxt.js (SSR as well)

I want to use a stencil library in my nuxt project. I was able to get it working, but while the vue components are being rendered in the server side, I only could make the stencil's component to render in the client side. I think the biggest…
vhoyer
  • 764
  • 8
  • 16
6
votes
3 answers

StencilJS | Apply host styles to component

I am trying to apply the styles from the website where a stencilJS component is included ... but don't know how. import { Component } from '@stencil/core'; @Component({ tag: 'menu-component', styleUrl: 'menu-component.css', shadow:…
Ciprian
  • 3,066
  • 9
  • 62
  • 98
6
votes
3 answers

Technical concepts of Angular Elements and Stencil

Are the technical concepts of Angular Elements and Stencil similar? Angular Elements will be a new feature in Angular 6, where u can basically wrap your written Angular component as a Web Component. In my understanding the generated Custom Element…
ChrisY
  • 1,681
  • 10
  • 12
5
votes
1 answer

How to use Flexbox with web components and shadow DOM

I'm working on a web app that uses web components built by StencilJS. All of the components have Shadow DOM turned on. Many of the components use 'slots' to accept child content. I'm having some trouble using Flexbox to lay out this app. A…
michaeljsalo
  • 523
  • 4
  • 16
5
votes
1 answer

StencilJs component not render in another stenciljs project

I've created a stenciljs webcomponents using the starter project, and I'm trying to grab it into another stenciljs project, via package.json dependecy, which points to a git repo. The webcomponent is imported in, but as soon as I try to run the…
RGLSV
  • 2,018
  • 1
  • 22
  • 37
5
votes
0 answers

Stencil.js: component level server side rendering

The stencil docs propose a way for server side rendering that works on a page level. It creates one whole of a hydrate app, which holds all the components created in a single index.js file which consumes whole of a HTML source page as input. Is…
user3250183
  • 506
  • 6
  • 19
5
votes
1 answer

Stenciljs E2E Testing: how to find a child of a child in the Shadow Dom

I have components arranged like so: app-home shadow-root component1 shadow-root div id=div1 In other words both my app-home and component1 have shadow doms. I can find component1 easily in Stenciljs E2E Tests like so: const page…
Safa Alai
  • 1,223
  • 1
  • 15
  • 27
5
votes
1 answer

how can npm init stencil works?

Can anyone explain me why npm init stencil works without install it globally? I'm used to use library and all should be installed globally so I don't understand why stencil work like that ....
user3887366
  • 2,226
  • 4
  • 28
  • 41
5
votes
2 answers

vue.js register webcomponent

I am using vue.js and created a webcomponent with stencil.js. I don't want to publish the webcomponent to npm, which is why I simply include it in the src/assets directory in my vue project. However I get the error [Vue warn]: Unknown custom…
Applecow
  • 796
  • 3
  • 13
  • 35
5
votes
2 answers

Can't use redux-observable with Stencil@one : "Class constructor Observable cannot be invoked without 'new'" error on ActionsObservable class

I have a Stencil component library using @Stencil/redux, redux, redux-observable and redux-actions. Everything worked fine before but I'm trying to upgrade to Stencil@One (1.0.0-beta.5). I have now an error during the Redux store creation. This is…
Elvynia
  • 337
  • 2
  • 11
5
votes
1 answer

StencilJS: Optional element doesn’t work in IE11/Edge

I wrote a web component with StencilJS. A slotted element should only be rendered in a specific case. So there is a optional element.
{this.active && ()}
The call of the web component…
JV3
  • 872
  • 2
  • 9
  • 21
5
votes
2 answers

Stenciljs - Background image css path

Im trying to add a background image on my scss file but I could not make it work. This is the code on my scss file: background-image: url('./assets/images/Square.svg'); And when I use my component on my other app this is the path I…
arturorv00
  • 131
  • 3
  • 11
5
votes
1 answer

stencil change @Prop() detection

How can I detect prop changes in stencil, in angular is something like this: But I don't know how is in stencil. import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'my-name', template: `

First name:…

Yefrid rios mora
  • 91
  • 2
  • 6
5
votes
3 answers

How to use stencil with third-party css library

I'm trying out stenciljs for the first time. I want to build a little application and not just a reusable web component. My question is if there's any possibility to add a third-party CSS library like Bootstrap, Skeleton or Bulma to my app. I tried…
JiiB
  • 1,432
  • 1
  • 12
  • 26
5
votes
2 answers

StencilJS - TypeScript - "Cannot find name ..." when exporting an enum

I have the following project: https://github.com/napolev/stencil-cannot-find-name which contains the following two files: custom-container.tsx import { Component, Element, State } from '@stencil/core'; @Component({ tag: 'custom-container', …
davidesp
  • 3,743
  • 10
  • 39
  • 77
1 2
3
…
47 48