FAQ

For what Stencil is and why it exists, see the overview and Stencil's goals.

What Stencil Provides

Does Stencil have a component library?

No. Stencil is a toolchain for building component libraries, and doesn't provide one of its own. The most widely used library built with Stencil is Ionic Framework.

Does Stencil come with a testing framework?

Stencil has no test runner built in. Two packages maintained alongside it add Stencil support to existing tools: @stencil/vitest for component tests, in a browser or in Node, and @stencil/playwright for end-to-end tests. See Testing.

What are framework bindings?

Stencil components are standard custom elements, so they work in any framework. Framework bindings add what each framework's developers expect on top of that, such as typed props and events. Stencil can generate them as types for a framework's templates, or as wrapper components for React, Vue, and Angular. See Framework Integration.

Technology

What template syntax does Stencil use?

Stencil uses JSX, the markup syntax popularized by React.

Can Stencil components be lazy loaded?

Yes. The loader-bundle output registers every component up front, and downloads the code for each one the first time it appears on the page. Components built with the standalone output can instead be imported one at a time through a bundler.

What dependencies does the Stencil runtime have?

None. Each build includes the small part of Stencil's runtime that its components use, and nothing else needs to be installed to use them. If several Stencil libraries should share one copy of the runtime, the externalRuntime option of the standalone and loader-bundle outputs leaves it as an import of @stencil/core.

Can data be passed to Web Components?

Yes. As with any DOM element, you can set arrays, objects, strings, and numbers on a component's properties. Attributes carry strings, which Stencil converts to the property's type.

How do slots work without shadow DOM?

Stencil mimics them. In scoped and none components, Stencil's runtime moves slotted content into place and emulates the slot API, so you write <slot> the same way in every encapsulation mode. See Slots Without Shadow DOM.

What browsers can support Stencil components?

Stencil components run in all modern browsers. See the browser support table for the minimum versions.

Stencil Project

Who works on Stencil?

Stencil is backed by OutSystems, and is maintained by an open-source community together with developers from Ionic.

Is Stencil open source?

Yes. Stencil's source code is on GitHub, under the MIT license.

How do I get involved?

Contributions are welcome. You can report issues and request features in the issue tracker, help to reproduce bugs, or send a pull request. See the Contributor Guide, and join the community on Discord.