What is Stencil?

Stencil is a compiler tool developed by the team at Ionic specifically for the generation of standards-based Web Components and has been used since Ionic 4 for the creation of all their UI components.

For those who are new to Web Components, these are self-contained bundles of HTML, JavaScript/TypeScript, and CSS that are encapsulated away from the main code of our applications to create reusable widgets and components.

Web Components can be developed this way through the use of the following APIs and standards:

  • Custom Elements: A set of JavaScript APIs that developers can utilize to generate custom HTML elements and define their respective behaviors
  • Shadow DOM: A set of JavaScript APIs that allow for the creation of a “shadow” DOM tree (one that is entirely separate from the main DOM), which allows for features to be self-encapsulated. In other words, this means they are not able to affect or be affected by other parts of the main DOM tree
  • HTML Templates: Reusable chunks of HTML can be defined through the <template> and <slot> elements, allowing them to be used in conjunction with the Custom Elements API
  • Modules: Defines how JavaScript modules can be imported or reused in a standards-based, performant manner

Benefits of using Web Components

The benefits of using Web Components within our applications are as follows:

  • Code is self-contained thanks to the Shadow DOM. Nothing leaks out or in.
  • There is reusable logic and functionality, allowing us to build once and use that many times in many places.
  • They are dependency-free (unless legacy browser support is required, in which case polyfills may be needed).
  • The allow the creation of custom design systems and in-house component libraries.
  • Cutting edge features like Virtual DOM rendering, async rendering, and so on.
  • They are framework agnostic, meaning that they can be used with any framework or with plain JavaScript.

These are all pretty huge selling points for developers and development teams looking to create highly performant, scalable applications. Still, when it comes to web technologies, we have to ask the question—what is the level of browser support?

Browser support

When it comes to Web Components, support is generally okay (if the planned suppert isn’t for Internet Explorer, that is):

Create a free account to view this lesson.

By signing up, you agree to Educative's Terms of Service and Privacy Policy