Stencil Info Page

Problem

As developers, we want to reuse code as much as possible. How can we make one web component that works across all major frameworks in the market today?

Solution

Stencil aims to solve this problem by allowing developers to create Web Components that are able to be used across frameworks, like React and Angular. Stencil compiles down code into raw javascript that can be used across frontend environments.

Web Components (from MDN)

Web Components consist of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.

• Custom elements: A set of JavaScript APIs that allow you to define custom elements and their behaviour, which can then be used as desired in your user interface.

• Shadow DOM: A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality. In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document.

• HTML templates: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.