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
0
votes
0 answers

How to create a custom Stencil component with the Ionic PWA Starter Kit

I just run the command: $ npx create-stencil ionic-pwa which created a vanilla Ionic 4 PWA with the following directory structure inside directory: src: . ├── assets │   └── icon │   ├── favicon.ico │   └── icon.png ├── components │   ├──…
davidesp
  • 3,743
  • 10
  • 39
  • 77
0
votes
0 answers

Skip focusing or activating a disabled button with Angular

When I press tab to navigate through controls on screen (for an Angular app), it includes disabled controls in the tab sequence, when using this Angular mechanism for conditionally disabling a control:
Michael Sorens
  • 35,361
  • 26
  • 116
  • 172
0
votes
1 answer

return isTrusted false

I'm writing my first web component with Stencil. It's a pills component published here : https://github.com/reservoir-dogs/rp-pills The component code's : import { Component, Prop, Watch, Event, EventEmitter } from '@stencil/core'; @Component({ …
di99er
  • 73
  • 7
0
votes
1 answer

Event emit error

so I have this code - @Component({ tag: "app-home", styleUrl: "app-home.css" }) export class AppHome { @Event() myEvent: EventEmitter; callEv() { this.myEvent.emit("hello"); } render() { return (
sanatgersappa
  • 4,319
  • 2
  • 18
  • 13
0
votes
1 answer

StencilJS styling other components

I have a simple component being called from another component that I was to add a margin value to. Example: Child component: import { Component } from '@stencil/core'; @Component({ tag: 'app-header', styleUrl: 'app-header.css', shadow:…
Rodrigo
  • 3,129
  • 3
  • 33
  • 61
0
votes
0 answers

stencils parent component variable change do not refresh child component

I am using 1 stencil component inside other component I want to validate input box inside my-input component on click of submit button of form which is in my-form component. how it can be achieved ?
Krati Rajput
  • 9
  • 1
0
votes
3 answers

Nested Stencil Routes/Components

I’ve been trying to implement nested routes/components. Can someone just please explain to me how to nest routes/components. The stencil route docs aren’t of much help. Say In my component I have on the left a sidenav with a couple of…
Newton Munene
  • 145
  • 3
  • 12
0
votes
1 answer

Copy html elements to shadow dom

I have a question how can I add existing elements to shadow dom. I have list of elements/components mostly form elements in slot and I want to have them in shadow dom of my component. I need all bindings also to be copied is it possible? Thanks for…
adi86
  • 253
  • 1
  • 2
  • 8
0
votes
1 answer

Building a simple table component

I would like to build two components, one for the table and one for each row. Coding for the table looks like that: @Component({ tag: 'wb-overview-table', }) export class WorkbookOverviewTable { items: Array; constructor() { …
Lukas
  • 3
  • 3
0
votes
2 answers

Stenciljs custom event not responding via @Listen

I am trying to understand the flow of the custom event emitter. I have the rolling code where the mouse events work but not the custom events. Tracing it through dev tools, it is emitting but not getting picked up by the listener. The top-level…
user2302244
  • 843
  • 2
  • 11
  • 27
0
votes
0 answers

Configure baseUrl for type: dist

How can I configure the baseUrl for outputTarget type of dist? This option only seems to be working for type of www, but looking in my Network panel, sources are still loaded from a specific…
kraftwer1
  • 5,253
  • 10
  • 36
  • 54
0
votes
1 answer

Does loading a font using @import inside a web component with shadow reload the file?

I'm using Stencil to create a native browser web component using shadow for view encapsulation. If at the top of my SCSS file I use @import url($url-icons); Will that have each component redownload the font/icon files for each component instance,…
David Alsh
  • 6,747
  • 6
  • 34
  • 60
0
votes
1 answer

Stencil Component Method definition

I am facing a problem developing a stencil.js web component. I have this error: (index):28 Uncaught TypeError: comp.hideDataPanel is not a function at HTMLDocument. ((index):28) I want to integrate my stencil component to a bigger browserify…
S.Delolme
  • 3
  • 4
0
votes
0 answers

How to use stencil components together with plain JS custom elements (web components)?

I'm having problem using JS custom elements (web components) together with stenciljs components with support in IE11 and modern browsers. I've downloaded stencil starter project https://github.com/ionic-team/stencil-component-starter and tried the…
majo
  • 1
  • 2
0
votes
1 answer

svg.js not working with Typescript and Stencil.js

I have a basic Stencil app built with Typescript. I'm not using Angular. I'm unable to use svg.js. Here is my full Component: import { Component, State } from '@stencil/core'; import * as moment from 'moment'; import * as SVG from…
leetheguy
  • 872
  • 10
  • 29
1 2 3
…
47
48