Typed Components

Web Components generated with stencil come with typing information automatically generated by the Stencil compiler. Typescript declarations provide strong guarantees when consuming components:

• Ensuring that proper values are passed down as properties
• Code autocompletion in modern IDEs such as Atom and VSCode
• Events' details
• Signature of components' methods

This public types are automatically generated by Stencil in src/component.d.ts, which allows for strong typing in JSX (just like React) and HTMLElement interfaces for each component.

Because Web Components generated by Stencil are just vanilla Web Components, they extend the HTMLElement interface. For each component a type named HTML{CamelCaseTag}Element is registered at the global scope, meaning developers DO NOT have to import them explicitly, just like HTMLElement or HTMLScriptElement are not imported.

• ion-button => HTMLIonButtonElement
• ion-menu-controller => HTMLIonMenuControllerElement

const button: HTMLIonButtonElement = document.queryElement('ion-button');
button.fill = 'outline';

IMPORTANT: always use the HTML{}Element interfaces in order to hold references to components.

Properties

This section has moved to Property Types

Required Properties

This section has moved to Required Properties