Stencil Web Components

We can render our compiled Stencil components directly in our Starlight documentation pages.

Demo

Here is our Stencil component <my-component> running natively:

Code

You can embed it in any MDX page by loading the <DefineCustomElements /> helper component:

---
title: Stencil Web Components
---

import DefineCustomElements from '../../../../src/components/DefineCustomElements.astro';

<DefineCustomElements />

<my-component first="Stencil" middle="Web" last="Component"></my-component>