Web components using Stencil
Using these components
Script tag
- Put a script tag similar to this
<script type="module" src="https://unpkg.com/web-components/dist/mycomponent.js"></script>in the head of your html document.
Node Modules
- Run
npm install my-component --save - Put a script tag similar to this
<script type="module" src="node_modules/web-components/dist/mycomponent.js"></script>in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
Developing components
Recommended orginal within component.ts files
@Component() class private properties
@Element()
@State() variables - Inlined decorator
@Prop() - Inlined decorator, JSDocs required @Watch("property_name") - watch items should appear near properties watchMethodhandler
@Event({ eventName: "", composed: true, cancelable: true, bubbles: true }) event_name: EventEmitter - Inlined decorator, JSDocs required
Component lifecycle events - ordered by natural call order connectedCallback() - called on adding to DOM. if 1st, called before willLoad disconnectedCallback() - called when removed from DOM componentWillLoad() - once after DOM connection componentDidLoad() - once after render componentWillUpdate() - before render() after @Prop/@State change [excl. 1st render()] componentDidUpdate() - after render() [excl. 1st render()] componentDidUnload() - after component removed componentWillRender() - before every render() componentDidRender() - after every render()
@Listen('someEvent') onSomeEvent(ev: UIEvent)
@Method() - Public methods, JSDocs required async metho_name(): Promise
Local methods
render() function