Stencil

Stencil provides basic support and an API for using Stencil web components with Drupal.

What is Stencil?

(Copied from their homepage)

"Stencil is a tool for building modern Web Components

Stencil combines some of the best features from traditional frameworks, but outputs 100% standards-compliant Custom Elements, part of the Web Component spec.

Stencil was created by the Ionic Framework team to build faster, more powerful mobile and web apps. Stencil is the foundation for the next generation of Ionic Framework, but is completely independent of Ionic or any other UI framework."

You can read more at https://stenciljs.com/docs/intro

Usage

By default, any Stencil collection downloaded to an enabled module or theme's "stencil" directory is automatically parsed and loaded on every page. After the component is loaded, you can write Stencil components anywhere you can write HTML - in Twig, Views, WYSIWYG (if you configure text formats correctly), anywhere!

Support for older browsers

Web components are natively supported in Chrome and Safari, but have not been adopted everywhere. This module uses a dynamic loader to detect what web component features are available, and uses polyfills when needed for older browsers. With polyfills, Stencil works on Chrome, Safari, Firefox, Edge, and IE11.

It's worth noting that with server side rendering, everyone will see an initial state of your page with web components pre-rendered, even if they have Javascript disabled.

What's next

This module is being actively developed and needs a lot of work before it's ready for a release. My short-term roadmap is:

1. Add test coverage for the discovery and parsing of Stencil registries
2. Make it easier to use web components in WYSIWYG
3. Consider adding another layer of metadata on top of Stencil for building dynamic user interfaces (i.e. what does this prop do, how should the form element look, etc.)
4. Investigate web component module integration and collaborate there
5. #2912969: Support component dependencies when server side rendering