@stencil/core

property vattrs

vattrs?: any;

property vchildren

vchildren?: VNode[];

property vkey

vkey?: string | number;

property vname

vname?: string;

property vtag

vtag?: string | number | Function;

property vtext

vtext?: string;

method componentDidLoad

componentDidLoad: () => void;

• The component has loaded and has already rendered.

  Updating data in this method will cause the component to re-render.

  componentDidLoad will only be called once.

method componentDidUpdate

componentDidUpdate: () => void;

• The component has just re-rendered.

  Called multiple times throughout the life of the component as it updates.

  componentWillUpdate is not called on the first render.

method componentDidLoad

componentDidLoad: () => void;

• The component has loaded and has already rendered.

  Updating data in this method will cause the component to re-render.

  componentDidLoad will only be called once.

method componentDidRender

componentDidRender: () => void;

method componentDidUpdate

componentDidUpdate: () => void;

• The component has just re-rendered.

  Called multiple times throughout the life of the component as it updates.

  componentWillUpdate is not called on the first render.

method componentShouldUpdate

componentShouldUpdate: (
    newVal: any,
    oldVal: any,
    propName: string
) => boolean | void;

• A @Prop or @State property changed and a rerender is about to be requested.

  Called multiple times throughout the life of the component as its properties change.

  componentShouldUpdate is not called on the first render.

method componentWillLoad

componentWillLoad: () => Promise<void> | void;

• The component is about to load and it has not rendered yet.

  This is the best place to make any data updates before the first render.

  componentWillLoad will only be called once.

method componentWillRender

componentWillRender: () => Promise<void> | void;

method componentWillUpdate

componentWillUpdate: () => Promise<void> | void;

• The component is about to update and re-render.

  Called multiple times throughout the life of the component as it updates.

  componentWillUpdate is not called on the first render.

method connectedCallback

connectedCallback: () => void;

method disconnectedCallback

disconnectedCallback: () => void;

method render

render: () => any;

index signature

[memberName: string]: any;

property assetsDirs

assetsDirs?: string[];

• Array of relative links to folders of assets required by the component.

property formAssociated

formAssociated?: boolean;

• When set to true this component will be form-associated. See https://stenciljs.com/docs/next/form-associated documentation on how to build form-associated Stencil components that integrate into forms like native browser elements such as <input> and <textarea>.

  The AttachInternals decorator allows for access to the ElementInternals object to modify the associated form.

property scoped

scoped?: boolean;

• If true, the component will use scoped stylesheets. Similar to shadow-dom, but without native isolation. Defaults to false.

property shadow

shadow?: boolean | ShadowRootOptions;

• If true, the component will use native shadow-dom encapsulation, it will fallback to scoped if the browser does not support shadow-dom natively. Defaults to false. Additionally, shadow can also be given options when attaching the shadow root.

property styles

styles?:
    | string
    | {
          [modeName: string]: any;
      };

• String that contains inlined CSS instead of using an external stylesheet. The performance characteristics of this feature are the same as using an external stylesheet.

  Notice, you can't use sass, or less, only css is allowed using styles, use styleUrl is you need more advanced features.

property styleUrl

styleUrl?: string;

• Relative URL to some external stylesheet file. It should be a .css file unless some external plugin is installed like @stencil/sass.

property styleUrls

styleUrls?: string[] | ModeStyles;

• Similar as styleUrl but allows to specify different stylesheets for different modes.

property tag

tag: string;

• Tag name of the web component. Ideally, the tag name must be globally unique, so it's recommended to choose an unique prefix for all your components within the same collection.

  In addition, tag name must contain a '-'

method componentWillLoad

componentWillLoad: () => Promise<void> | void;

• The component is about to load and it has not rendered yet.

  This is the best place to make any data updates before the first render.

  componentWillLoad will only be called once.

method componentWillUpdate

componentWillUpdate: () => Promise<void> | void;

• The component is about to update and re-render.

  Called multiple times throughout the life of the component as it updates.

  componentWillUpdate is not called on the first render.

property allowInlineScripts

allowInlineScripts?: boolean;

• By default, Stencil will attempt to optimize small scripts by inlining them in HTML. Setting this flag to false will prevent this optimization and keep all scripts separate from HTML.

property autoprefixCss

autoprefixCss?: boolean | any;

• By setting autoprefixCss to true, Stencil will use the appropriate config to automatically prefix css. For example, developers can write modern and standard css properties, such as "transform", and Stencil will automatically add in the prefixed version, such as "-webkit-transform". As of Stencil v2, autoprefixing CSS is no longer the default. Defaults to false

property buildDist

buildDist?: boolean;

• Sets whether Stencil will write files to dist/ during the build or not.

  By default this value is set to the opposite value of devMode, i.e. it will be true when building for production and false when building for development.

property buildEs5

buildEs5?: boolean | 'prod';

• Sets if the ES5 build should be generated or not. Stencil generates a modern build without ES5, whereas this setting to true will also create es5 builds for both dev and prod modes. Setting buildEs5 to prod will only build ES5 in prod mode. Basically if the app does not need to run on legacy browsers (IE11 and Edge 18 and below), it's safe to not build ES5, which will also speed up build times. Defaults to false.

property buildLogFilePath

buildLogFilePath?: string;

property bundles

bundles?: ConfigBundle[];

• By default, Stencil will statically analyze the application and generate a component graph of how all the components are interconnected.

  From the component graph it is able to best decide how components should be grouped depending on their usage with one another within the app. By doing so it's able to bundle components together in order to reduce network requests. However, bundles can be manually generated using the bundles config.

  The bundles config is an array of objects that represent how components are grouped together in lazy-loaded bundles. This config is rarely needed as Stencil handles this automatically behind the scenes.

property cacheDir

cacheDir?: string;

• The directory where sub-directories will be created for caching when enableCache is set true or if using Stencil's Screenshot Connector.

  '.stencil'

  Example 1

  A Stencil config like the following:

  export const config = {
   ...,
   enableCache: true,
   cacheDir: '.cache',
   testing: {
     screenshotConnector: 'connector.js'
   }
  }

  Will result in the following file structure:

  stencil-project-root
  └── .cache
      ├── .build <-- Where build related file caching is written
      |
      └── screenshot-cache.json <-- Where screenshot caching is written

property commonjs

commonjs?: BundlingConfig;

• Passes custom configuration down to the "@rollup/plugin-commonjs" that Stencil uses under the hood. For further information: https://stenciljs.com/docs/module-bundling

property devInspector

devInspector?: boolean;

property devMode

devMode?: boolean;

• Forces Stencil to run in dev mode if the value is true and production mode if it's false.

  Defaults to false (ie. production) unless the --dev flag is used in the CLI.

property devServer

devServer?: StencilDevServerConfig;

property enableCache

enableCache?: boolean;

• Stencil will cache build results in order to speed up rebuilds. To disable this feature, set enableCache to false.

property entryComponentsHint

entryComponentsHint?: string[];

property env

env?: {
    [prop: string]: string | undefined;
};

• Provide a object of key/values accessible within the app, using the Env object.

property excludeUnusedDependencies

excludeUnusedDependencies?: boolean;

• Set whether unused dependencies should be excluded from the built output.

property extras

extras?: ConfigExtras;

• Config to add extra runtime for DOM features that require more polyfills. Note that not all DOM APIs are fully polyfilled when using the slot polyfill. These are opt-in since not all users will require the additional runtime.

property globalScript

globalScript?: string;

property globalStyle

globalStyle?: string;

• Stencil is traditionally used to compile many components into an app, and each component comes with its own compartmentalized styles. However, it's still common to have styles which should be "global" across all components and the website. A global CSS file is often useful to set CSS Variables.

  Additionally, the globalStyle config can be used to precompile styles with Sass, PostCSS, etc. Below is an example folder structure containing a webapp's global sass file, named app.css.

property hashedFileNameLength

hashedFileNameLength?: number;

• When the hashFileNames config is set to true, and it is a production build, the hashedFileNameLength config is used to determine how many characters the file name's hash should be.

property hashFileNames

hashFileNames?: boolean;

• During production builds, the content of each generated file is hashed to represent the content, and the hashed value is used as the filename. If the content isn't updated between builds, then it receives the same filename. When the content is updated, then the filename is different.

  By doing this, deployed apps can "forever-cache" the build directory and take full advantage of content delivery networks (CDNs) and heavily caching files for faster apps.

property hydratedFlag

hydratedFlag?: HydratedFlag | null;

• The hydrated flag identifies if a component and all of its child components have finished hydrating. This helps prevent any flash of unstyled content (FOUC) as various components are asynchronously downloaded and rendered. By default it will add the hydrated CSS class to the element. The hydratedFlag config can be used to change the name of the CSS class, change it to an attribute, or change which type of CSS properties and values are assigned before and after hydrating. This config can also be used to not include the hydrated flag at all by setting it to null.

property invisiblePrehydration

invisiblePrehydration?: boolean;

• Ionic prefers to hide all components prior to hydration with a style tag appended to the head of the document containing some visibility: hidden; css rules.

  Disabling this will remove the style tag that sets visibility: hidden; on all un-hydrated web components. This more closely follows the HTML spec, and allows you to set your own fallback content.

property logger

logger?: Logger;

• Object to provide a custom logger. By default a logger is already provided for the platform the compiler is running on, such as NodeJS or a browser.

property maxConcurrentWorkers

maxConcurrentWorkers?: number;

property minifyCss

minifyCss?: boolean;

• Sets if the CSS is minified or not. Defaults to false in dev mode and true in production mode.

property minifyJs

minifyJs?: boolean;

• Sets if the JS browser files are minified or not. Stencil uses terser under the hood. Defaults to false in dev mode and true in production mode.

property namespace

namespace?: string;

• The namespace config is a string representing a namespace for the app. For apps that are not meant to be a library of reusable components, the default of App is just fine. However, if the app is meant to be consumed as a third-party library, such as Ionic, a unique namespace is required.

property nodeResolve

nodeResolve?: NodeResolveConfig;

• Passes custom configuration down to the "@rollup/plugin-node-resolve" that Stencil uses under the hood. For further information: https://stenciljs.com/docs/module-bundling

property outputTargets

outputTargets?: OutputTarget[];

• Stencil is able to take an app's source and compile it to numerous targets, such as an app to be deployed on an http server, or as a third-party library to be distributed on npm. By default, Stencil apps have an output target type of www.

  The outputTargets config is an array of objects, with types of www and dist.

property plugins

plugins?: any[];

• The plugins config can be used to add your own rollup plugins. By default, Stencil does not come with Sass or PostCSS support. However, either can be added using the plugin array.

property preamble

preamble?: string;

property rollupConfig

rollupConfig?: RollupConfig;

• Passes custom configuration down to rollup itself, not all rollup options can be overridden.

property rollupPlugins

rollupPlugins?: {
    before?: any[];
    after?: any[];
};

property sourceMap

sourceMap?: boolean;

• Generate js source map files for all bundles

property srcDir

srcDir?: string;

• The srcDir config specifies the directory which should contain the source typescript files for each component. The standard for Stencil apps is to use src, which is the default.

property srcIndexHtml

srcIndexHtml?: string;

property stencilCoreResolvedId

stencilCoreResolvedId?: string;

property sys

sys?: CompilerSystem;

property taskQueue

taskQueue?: 'async' | 'immediate' | 'congestionAsync';

• Sets the task queue used by stencil's runtime. The task queue schedules DOM read and writes across the frames to efficiently render and reduce layout thrashing. By default, async is used. It's recommended to also try each setting to decide which works best for your use-case. In all cases, if your app has many CPU intensive tasks causing the main thread to periodically lock-up, it's always recommended to try [Web Workers](https://stenciljs.com/docs/web-workers) for those tasks.

  - async: DOM read and writes are scheduled in the next frame to prevent layout thrashing. During intensive CPU tasks it will not reschedule rendering to happen in the next frame. async is ideal for most apps, and if the app has many intensive tasks causing the main thread to lock-up, it's recommended to try [Web Workers](https://stenciljs.com/docs/web-workers) rather than the congestion async queue.

  - congestionAsync: DOM reads and writes are scheduled in the next frame to prevent layout thrashing. When the app is heavily tasked and the queue becomes congested it will then split the work across multiple frames to prevent blocking the main thread. However, it can also introduce unnecessary reflows in some cases, especially during startup. congestionAsync is ideal for apps running animations while also simultaneously executing intensive tasks which may lock-up the main thread.

  - immediate: Makes writeTask() and readTask() callbacks to be executed synchronously. Tasks are not scheduled to run in the next frame, but do note there is at least one microtask. The immediate setting is ideal for apps that do not provide long running and smooth animations. Like the async setting, if the app has intensive tasks causing the main thread to lock-up, it's recommended to try [Web Workers](https://stenciljs.com/docs/web-workers).

property testing

testing?: TestingConfig;

property transformAliasedImportPaths

transformAliasedImportPaths?: boolean;

• Sets whether or not Stencil should transform path aliases set in a project's tsconfig.json from the assigned module aliases to resolved relative paths.

  This behavior defaults to true, but may be opted-out of by setting this flag to false.

property tsconfig

tsconfig?: string;

property validatePrimaryPackageOutputTarget

validatePrimaryPackageOutputTarget?: boolean;

• When true, we will validate a project's package.json based on the output target the user has designated as isPrimaryPackageOutputTarget: true in their Stencil config.

property validateTypes

validateTypes?: boolean;

property watch

watch?: boolean;

property watchIgnoredRegex

watchIgnoredRegex?: RegExp | RegExp[];

• An array of RegExp patterns that are matched against all source files before adding to the watch list in watch mode. If the file path matches any of the patterns, when it is updated, it will not trigger a re-run of tests.

property emit

emit: (data?: T) => CustomEvent<T>;

property bubbles

bubbles?: boolean;

• A Boolean indicating whether the event bubbles up through the DOM or not.

property cancelable

cancelable?: boolean;

• A Boolean indicating whether the event is cancelable.

property composed

composed?: boolean;

• A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.

property eventName

eventName?: string;

• A string custom event name to override the default.

call signature

(props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];

property forEach

forEach: (
    children: VNode[],
    cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void
) => void;

• Utility for reading the children of a functional component at runtime. Since the Stencil runtime uses a different interface for children it is not recommended to read the children directly, and is preferable to use this utility to, for instance, perform a side effect for each child.

property map

map: (
    children: VNode[],
    cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode
) => VNode[];

• Utility for transforming the children of a functional component. Given an array of children and a callback this will return a list of the results of passing each child to the supplied callback.

property capture

capture?: boolean;

• Event listener attached with @Listen does not "capture" by default, When a event listener is set to "capture", means the event will be dispatched during the "capture phase". Please see https://www.quirksmode.org/js/events_order.html for further information.

property passive

passive?: boolean;

• By default, Stencil uses several heuristics to determine if it must attach a passive event listener or not.

  Using the passive option can be used to change the default behavior. Please see https://developers.google.com/web/updates/2016/06/passive-event-listeners for further information.

property target

target?: ListenTargetOptions;

• Handlers can also be registered for an event other than the host itself. The target option can be used to change where the event listener is attached, this is useful for listening to application-wide events.

index signature

[modeName: string]: string | string[];

property crawlUrls

crawlUrls?: boolean;

• While prerendering, crawl same-origin URLs found within <a href> elements. Defaults to true.

property entryUrls

entryUrls?: string[];

• URLs to start the prerendering from. By default the root URL of / is used.

property staticSite

staticSite?: boolean;

• Static Site Generated (SSG). Does not include Stencil's client-side JavaScript, custom elements or preload modules.

property trailingSlash

trailingSlash?: boolean;

• If the prerendered URLs should have a trailing "/"" or not. Defaults to false.

method afterHydrate

afterHydrate: (
    document: Document,
    url: URL,
    results: PrerenderUrlResults
) => any | Promise<any>;

• Run after each document is hydrated, but before it is serialized into an HTML string. Hook is passed the document and its URL.

method afterSerializeTemplate

afterSerializeTemplate: (html: string) => string | Promise<string>;

• Runs after the template Document object has serialize into an HTML formatted string. Returns an HTML string to be used as the base template for all prerendered pages.

method beforeHydrate

beforeHydrate: (document: Document, url: URL) => any | Promise<any>;

• Run before each document is hydrated. Hook is passed the document it's URL.

method beforeSerializeTemplate

beforeSerializeTemplate: (document: Document) => Document | Promise<Document>;

• Runs before the template Document object is serialize into an HTML formatted string. Returns the Document to be serialized which will become the base template html for all prerendered pages.

method canonicalUrl

canonicalUrl: (url: URL) => string | null;

• A hook to be used to generate the canonical <link> tag which goes in the <head> of every prerendered page. Returning null will not add a canonical url tag to the page.

method filePath

filePath: (url: URL, filePath: string) => string;

• Returns the file path which the prerendered HTML content should be written to.

method filterAnchor

filterAnchor: (attrs: { [attrName: string]: string }, base?: URL) => boolean;

• Return true the given <a> element should be crawled or not.

method filterUrl

filterUrl: (url: URL, base: URL) => boolean;

• Return true if the given URL should be prerendered or not.

method hydrateOptions

hydrateOptions: (url: URL) => PrerenderHydrateOptions;

• Returns the hydrate options to use for each individual prerendered page.

method loadTemplate

loadTemplate: (filePath: string) => string | Promise<string>;

• Returns the template file's content. The template is the base HTML used for all prerendered pages.

method normalizeUrl

normalizeUrl: (href: string, base: URL) => URL;

• Used to normalize the page's URL from a given a string and the current page's base URL. Largely used when reading an anchor's href attribute value and normalizing it into a URL.

method robotsTxt

robotsTxt: (opts: RobotsTxtOpts) => string | RobotsTxtResults;

method sitemapXml

sitemapXml: (opts: SitemapXmpOpts) => string | SitemapXmpResults;

property attribute

attribute?: string | null;

• The name of the associated DOM attribute. Stencil uses different heuristics to determine the default name of the attribute, but using this property, you can override the default behavior.

property mutable

mutable?: boolean;

• A Prop is _by default_ immutable from inside the component logic. Once a value is set by a user, the component cannot update it internally. However, it's possible to explicitly allow a Prop to be mutated from inside the component, by setting this mutable option to true.

property reflect

reflect?: boolean;

• In some cases it may be useful to keep a Prop in sync with an attribute. In this case you can set the reflect option to true, since it defaults to false:

property clear

clear?: () => void;

property flush

flush?: (cb?: () => void) => void;

property read

read: (cb: RafCallback) => void;

property tick

tick: (cb: RafCallback) => void;

property write

write: (cb: RafCallback) => void;

call signature

(timeStamp: number): void;

property $attrs$

$attrs$?: any;

property $children$

$children$: VNode[];

property $elm$

$elm$: any;

property $flags$

$flags$: number;

property $key$

$key$?: string | number;

property $name$

$name$?: string;

property $tag$

$tag$: string | number | Function;

property $text$

$text$: string;

property class

class?: {
    [className: string]: boolean;
};

property style

style?: any;

index signature

[attrName: string]: any;

variable content

const content: string;

variable src

const src: string;

variable worker

const worker: Worker;

variable workerMsgId

const workerMsgId: string;

variable workerName

const workerName: string;

variable workerPath

const workerPath: string;

variable src

const src: string;

variable src

const src: string;

variable src

const src: string;

variable src

const src: string;

variable src

const src: string;

function h

h: {
    (sel: any): VNode;
    (sel: Node, data: VNodeData): VNode;
    (sel: any, data: VNodeData): VNode;
    (sel: any, text: string): VNode;
    (sel: any, children: VNode[]): VNode;
    (sel: any, data: VNodeData, text: string): VNode;
    (sel: any, data: VNodeData, children: VNode[]): VNode;
    (sel: any, data: VNodeData, children: VNode): VNode;
};