stenciljs

问题 I'm building an electron app with stencil. I want to make a div-container visible, when I click a button. I imported jQuery library but the function doesn't make the toggleClass-method. It just shows the console.log(). Can please someone help me? my-component.tsx code: import { Component, Prop, Listen} from '@stencil/core'; import $ from 'jquery'; @Component({ tag: 'aufklapp-button', styleUrl: 'aufklapp-button.css', shadow: true }) export class AufklappButton { @Prop() test: string; @Listen(

问题 According to documentation, Stencil component's property myProperty @Prop({attribute: "my-prop"}) public myProperty?: object = {}; should be set by using this HTML code: <my-component my-prop="{hello: 'world'}" ></my-component> But, instead, it's set to default value (empty object). Boolean and string values work fine. Is it a bug, or I've overlooked something? 回答1: Stencil does not automatically parse object properties. You have two options: Set the property using JavaScript Set it as a HTML

问题 I am trying to integrate the web component built using StencilJS but I get the following error. Uncaught (in promise) TypeError: Cannot read property 'isProxied' of undefined at initializeComponent ReactJS, index.js file => import {defineCustomElements} from 'my-modal/loader'; defineCustomElements(window); StencilJS component: import { Component, Prop, h } from '@stencil/core'; @Component({ tag: 'my-component', styleUrl: 'my-component.css', shadow: true }) export class MyComponent { @Prop()

问题 I am trying to integrate the web component built using StencilJS but I get the following error. Uncaught (in promise) TypeError: Cannot read property 'isProxied' of undefined at initializeComponent ReactJS, index.js file => import {defineCustomElements} from 'my-modal/loader'; defineCustomElements(window); StencilJS component: import { Component, Prop, h } from '@stencil/core'; @Component({ tag: 'my-component', styleUrl: 'my-component.css', shadow: true }) export class MyComponent { @Prop()

问题 I need to listen the event that a child component fired. In my case, I have a "tabs" component made in stencil v1 that has this structure... abc-tabs.tsx import { Component, h, Listen, Element, State, Event, Method, EventEmitter } from '@stencil/core'; @Component({ tag: 'abc-tabs' }) export class AepTabs { @Element() tabs: HTMLElement; @State() initIndex: number = 0; @Event() tabClick: EventEmitter; // <---------- HERE private tabsElements; private tabsElementList: Array<any> = []; private

问题 Is there a reliable way to wait for the next render to complete, e.g. with a Promise? My use case: I want to restart a CSS animation by removing and adding a class to my element using a state variable: @State() isAnimating = true; restartAnimation() { this.isAnimating = false; // TODO wait for render to complete this.isAnimating = true; } render() { return <Host class={{ animated: this.isAnimating }}></Host> } Is there an easy way to achieve this? I've tried readTask and writeTask as well as

问题 I'm currently experimenting with StencilJS to create some web components. Now I know that there is <slot /> and named slots and all that stuff. Coming from React, I guess slot is similar to children in React. You can do a lot of stuff using children in React. Things I often did: Check if any children are provided Iterate over children to do something to each child (e.g. wrap it in a div with a class etc.) How would you do that using slot/web components/stencilJS? I can get the Host Element of

问题 I'm currently experimenting with StencilJS to create some web components. Now I know that there is <slot /> and named slots and all that stuff. Coming from React, I guess slot is similar to children in React. You can do a lot of stuff using children in React. Things I often did: Check if any children are provided Iterate over children to do something to each child (e.g. wrap it in a div with a class etc.) How would you do that using slot/web components/stencilJS? I can get the Host Element of

问题 I'm currently experimenting with StencilJS to create some web components. Now I know that there is <slot /> and named slots and all that stuff. Coming from React, I guess slot is similar to children in React. You can do a lot of stuff using children in React. Things I often did: Check if any children are provided Iterate over children to do something to each child (e.g. wrap it in a div with a class etc.) How would you do that using slot/web components/stencilJS? I can get the Host Element of

来源： https://stackoverflow.com/questions/53003274/ionic4-component-menu-must-have-a-content-element-to-listen-for-drag-events