Draft:StencilJS

• Comment: The "improvements" are more promotion and borderline G12. Rejecting since as I said six months ago, the editor is just continuing to push the article into mainspace rather than trying to improve it. Star Mississippi 17:34, 1 February 2025 (UTC)

• Comment: Large sections of unsourced content. Encoded  Talk 💬 22:06, 16 June 2024 (UTC)

• Comment: This is more promotional, not less. I'm not going to review, but I'd advocate for this being rejected since the editor is not interested in improving it. Star Mississippi 13:56, 7 June 2024 (UTC)

• Comment: Issues raised at the AfD have not been addressed. Please stop continually repasting this content. That is not a path to approval. Star Mississippi 11:26, 9 April 2024 (UTC)

---

{{Multiple issues|

Stencil.JS

Original author(s)	Adam Bradley
Developer(s)	Ionic (mobile app framework)
Initial release	May 20, 2017 (2017-05-20)
Stable release	4.25.1
Repository	StencilJS Repository
Written in	TypeScript
Platform	JavaScript engine
Size	16.5 KB
Type	Web framework
License	MIT License
Website	stenciljs.com

StencilJS is an open-source compiler for building highly optimized Web Components. Developed by the team at Ionic, StencilJS combines the best features of modern JavaScript frameworks with the simplicity and performance of Web Components, enabling developers to create reusable, framework-agnostic UI components.

StencilJS is a powerful tool for building Web Components that work seamlessly across different frameworks. By combining modern web development best practices with performance optimizations, StencilJS provides an efficient way to develop scalable, maintainable, and reusable UI components. Its source code is licensed under MIT License and hosted on GitHub. StencilJS generates framework-specific wrappers that allow custom elements developed, to be used with any framework, whether its Angular, React, or Vue.js.

History

StencilJS was introduced by the Ionic team in 2017 to address the challenges of building performant, scalable UI components for Ionic’s ecosystem. Unlike traditional frameworks such as React, Angular, or Vue, StencilJS is not a framework but a compiler that generates standard-compliant Web Components. These components can be used in any JavaScript framework or as standalone elements in vanilla JavaScript applications.

Main Features

StencilJS provides several features that make it an attractive choice for building Web Components:

• TypeScript Support: StencilJS is built with TypeScript, providing strong typing and improved developer experience.
• Virtual DOM: Uses a lightweight Virtual DOM for efficient updates and rendering.
• Reactive Data Binding: Supports reactive properties and state management.
• Lazy Loading: Optimized lazy loading of components to improve performance.
• Scoped CSS and Shadow DOM: Ensures style encapsulation and component isolation.
• Automatic Polyfills: Provides polyfills for older browsers to ensure cross-browser compatibility.
• Build-time Optimizations: Features ahead-of-time (AOT) compilation and tree-shaking for optimized builds.

Architecture

StencilJS components are built using a class-based syntax and decorators, similar to Angular. A typical component consists of:

• @Component(): Defines metadata for the component.

• @Prop(): Declares component properties.

• @State(): Maintains internal component state.

• @Method(): Exposes public methods.

• @Event(): Enables event-driven communication.

Basic usage

A StencilJS component looks similar to a class-based React component, with the addition of TypeScript decorators.

import { Component, h, Prop, State } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true // Enable Shadow DOM
})
export class MyComponent {
  @Prop() name: string;
  @State() count: number = 0;

  increment() {
    this.count++;
  }
  render() {
    return (
      <div>
        <p>Hello, {this.name}!</p>
       <p>Count: {this.count}</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    );
  }
}

In this example, the @Component decorator defines a new web component named my-component. The @Prop decorator defines a property that can be passed to the component, and the render method returns the component's HTML structure using JSX.

StencilJS components can be used in various environments:

• Vanilla JavaScript:

<script type="module" src="/build/my-component.js"></script>
<my-component name="Stencil"></my-component>

• React

import { defineCustomElements } from 'my-component/loader';
defineCustomElements();
<my-component name="React"></my-component>

• Angular

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

• Vue: Uses Vue’s native support for Web Components.

Applications

StencilJS is widely used in:

• Design Systems: Large organizations use StencilJS to build design systems with framework-agnostic components.

• Enterprise Applications: Provides a scalable approach for component-based UI development.

• Ionic Framework: The Ionic UI library is built using StencilJS.

• Progressive web app (PWA).

• Several companies like Upwork, Volkswagen, Porsche, MasterCard, Amazon, Adidas, Panera etc. have built their design systems based on Stencil-based Web Components.

• Liberty Mutual Ins. Group's Design System FLUID (Frontend Library for User Interface Development) is built using StencilJS. The music streaming platform Amazon Music is built using StencilJS.

Comparision

Comparison with Other Frameworks

Feature	StencilJS	React	Angular	Vue
Web Component Support	Native	Requires Wrapper	Requires Wrapper	Requires Wrapper
Virtual DOM	Yes	Yes	No	Yes
Performance	High	Medium	Medium	High
TypeScript	Yes	Yes	Yes	Yes

See also

• Svelte
• LitElement

External links

• Introduction to stenciljs
• Stencil App Starter
• StencilJS on Twitter

Category:2017 software Category:Compilers Category:Web development Category:Software using the MIT license