Questions tagged [stencil-component]
82 questions
37
votes
4 answers
How Stencil is different from React and Angular?
I am familiar with Angular and know basics of React. I was exploring stencil docs, I found stencil component has both @Component decorator and render() method -
component.tsx
import { Component, Prop } from '@stencil/core';
@Component({
tag:…
Swapnil Patwa
- 4,069
- 3
- 25
- 37
21
votes
2 answers
Web components: How to work with children?
I'm currently experimenting with StencilJS to create some web components.
Now I know that there is
Schadenn
- 854
- 1
- 9
- 20
8
votes
3 answers
Stenciljs @Method not working
I'm struggling to get @Method in stenciljs working - any help would be appreciated.
Here's my component code with a function called setName that I want to expose on my component:
import { Component, Prop, Method, State } from…
Carl Rippon
- 4,553
- 8
- 49
- 64
7
votes
2 answers
How to use an external third party library in Stencil.js
I have a Stencil component and, as part of its business logic, I need to use an external Javascript file mylib.js. The Javascript file contains some business logic the Stencil component should use.
Here's my component:
import { Component, Element,…
Gianluca Ghettini
- 11,129
- 19
- 93
- 159
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
4
votes
0 answers
StencilJS Rendering nested componentes
I have created two web components that are nested together. The main problem that I am facing is when I try to render the child component, everything from the parent gets overlapped.
I think that the issue is that both parent component and child…
Gastón Arias
- 39
- 4
4
votes
1 answer
How can I insert an image into a Web Component?
I'm trying to insert an image into a Web Component I'm building with Stencil.
I'm getting 2 errors:
AppLogo is declared but its value is never read.
and
Cannot find module ../assets/logo.svg.
Directories:
- src
-- components
--- app-header
----…
Aaron Benjamin
- 1,291
- 3
- 18
- 27
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
3
votes
2 answers
Stenciljs: Cannot find another component
I have created a new project in Stenciljs, but I have a problem using the components created in that project.
import { Component, h, Prop } from '@stencil/core';
@Component({
tag: 'fd-story',
styleUrl: './story.css',
shadow:…
Luis
- 2,006
- 5
- 31
- 47
3
votes
1 answer
Stencil object properties are not set, when they provided through the HTML string
According to documentation, Stencil component's property myProperty
@Prop({attribute: "my-prop"})
public myProperty?: object = {};
should be set by using this HTML code:
Alex
- 4,621
- 1
- 20
- 30
2
votes
3 answers
How to prevent onClick on disabled button in StencilJs
I have created my own custom button as below
@Component({
tag: "idv-button",
styleUrl: "idv-button.scss",
shadow: true,
})
export class IdvButton {
@Prop({ reflect: true }) text: string;
@Prop({ reflect: true }) disabled:…
Reza
- 18,865
- 13
- 88
- 163
2
votes
1 answer
How to access elements inner two shadow dom
I'm using the follow web-component tree:
:shadow-root
:shadow-root
Marcello Oliveira
- 23
- 4
2
votes
4 answers
Using jQuery and bootstrap JS with stenciljs components
We have application that is built using Angular and now for all customer-specific requirements we want to build web components using stencil js.
Idea is to keep core application clean and not to mixin code for specific client requirements.
So we…
Haris Hajdarevic
- 1,535
- 2
- 25
- 39
2
votes
2 answers
Stencil.js - Listen to class attribute changes on host element
How do I listen to changes to the class attribute on the host element?
Suleman C
- 783
- 4
- 17
2
votes
0 answers
Bootstrap Angular 2+ app on specific DOM element inside another framework
I'm trying to bootstrap an Angular 2+ app (6 to be precise) inside a specific DOM node. I want to do this inside a web component my-component (written with StencilJS).
Ideally I could bootstrap from the root element of my web component with a…
Matthias Max
- 595
- 1
- 7
- 20