VOOZH about

URL: https://stenciljs.com/

⇱ Stencil

Important Announcement: The Future of Ionic’s Commercial Products →

  • 👁 circle icon

    Simple

    With intentionally small tooling, a tiny API, and out-of-the-box configuration, Stencil gets out of the way and lets you focus.

  • 👁 circle icon

    Performant

    A tiny runtime and the raw power of native Web Components make Stencil one of the fastest compilers around.

  • 👁 circle icon

    Future proof

    Build cross-framework component libraries on open web standards, and break free of Framework Churn.

  • 👁 circle icon

    Framework-agnostic

    Stencil components are just Web Components, so they will work with any major framework—or no framework at all.

Powering cross-functional components at some of the world’s best companies. See how →

  • 👁 box icon

    Web components

    Build modern, standards-compliant web components that work in any browser with slots, shadow DOM, and more.

  • 👁 shining icon

    Flexible output

    With flexible models for how you want to use your components, Stencil can optimize for treeshaking, loading, and more.

  • 👁 typescript logo

    TypeScript support

    Stencil uses TypeScript, providing your components with type safety as your system scales.

  • 👁 star icon

    Asynchronous rendering pipeline

    Ensure your components render smoothly with Stencil’s built-in asynchronous rendering pipeline.

  • 👁 stack icon

    Documentation generation

    Generate automatically-updated documentation from JSDoc comments that live close to the code

  • 👁 triangle icon

    Dependency-free

    Stencil comes with all the dependencies and preset scripts you need to start building.

  • 👁 react icon

    JSX support

    Describe your components using a well known templating syntax, with all the features of JavaScript available to you.

  • 👁 box icon

    Intuitive developer experience

    With a fully-typed API, built-in hot reloading dev-server, and custom utils, Stencil offers an intuitive DX.

  • 👁 box icon

    Component Libraries

    Build and publish interactive components and features that run on any site, built on any stack.

@Component({
 tag:'ds-text',
 styleUrl:'ds-text.css',
 shadow:true,
})
exportclassText{
render(){
return(
<slotname='ds-corp-text'>
 Your Text Rendered Here
</slot>
);
}
}
import{Component,Listen, h }from'@stencil/core';
@Component({
 tag:'huge-text-button',
 styleUrl:'huge-text-button.css',
 shadow:true,
})
exportclassHugeTextButton{
 @Listen('click',{ capture:true})
handleClick(ev){
 ev.preventDefault();
console.log("I've been clicked!");
}
render(){
return(
<button>
<huge-text>
<slotname='huge-button-text'>Click Me</slot>
</huge-text>
</button>
)
}
}

  • Sourcemaps

    Generate maps from your TypeScript to the generated JavaScript for easy debugging.

  • Zero-config

    Stencil comes with a great out of the box default configuration, while allowing you to change it.

  • Unit Testing

    Unit testing is built in to Stencil, including custom test matchers and configuration.

  • Code Generation

    Generate the code for a new component, styles, and tests with a single command.

  • Doc Generation

    Generate documentation directly from code comments, ensuring your docs are always up to date.

  • Types

    Stencil uses TypeScript, providing type safety and syntax highlighting in your favorite code editor.

  • Local Dev-Server

    Move faster with a local dev-server with hot module reloading. Make a change, see it instantly.

  • World-Class Docs

    Comprehensive documentation written by the Stencil team and the open source community.