Add Example of How to Use Custom Elements in Fresh

[dhruv-dabhi-st7]

Description Currently, the Deno Fresh documentation lacks an example of how to integrate and use a custom-created component that is not built into the Deno stack. This can be challenging for developers who want to extend their Fresh applications with custom components.

Proposed Solution: Add a section in the documentation that provides a step-by-step guide on how to create and use a custom component in a Fresh project. The example should include:

1. Creating a custom component file.
2. Importing and using the custom component in a Fresh route.
3. Best practices for organizing custom components within a Fresh project.

[marvinhagemeister]

What is a "custom component"? Do you mean a Preact component? If yes, then it looks like this:

function MyComponent() {
  return <h1>hello world</h1>
}

// usage
<MyComponent />

But not sure if this is what you're asking.

[dhruv-dabhi-st7]

Steps to Use a Custom Component in a Fresh Project

1. Create the Component
   • Write your component in HTML, CSS, and JavaScript.
   • Example: my-component.html.

<!-- my-component.html -->
<template id="my-component-template">
  <style>
    /* Add your CSS here */
    .my-component {
      color: red;
    }
  </style>
  <div class="my-component">
    <!-- Add your HTML here -->
    <p>Hello, I am a custom component!</p>
  </div>
</template>

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('my-component-template').content;
      this.attachShadow({ mode: 'open' }).appendChild(template.cloneNode(true));
    }
  }

  customElements.define('my-component', MyComponent);
</script>

2. Deploy the Component

   • Deploy my-component.html to a static hosting service (e.g., GitHub Pages, deno deploy).
   • Example URL: https://yourusername.github.io/my-component.html.

3. Declare the Component in TypeScript

   • Add the component to the IntrinsicElements interface in your global.d.tsx file.

// types/global.d.tsx
declare module "preact" {
  namespace JSX {
    interface IntrinsicElements {
      "my-component": {
        flag?: string;
        label?: string;
        children?: preact.ComponentChildren;
        slot?: string;
      };
    }
  }
}

4. Usage in Fresh
   • Include the script for your custom component in your HTML.
   • Use the component in your Fresh project with proper TypeScript declarations.

// routes/index.tsx
export default function Home() {
  return (
    <>
      <my-component flag="example"></my-component>
    </>
  );
}

This setup allows you to create, deploy, and use a custom component in a Fresh project.

[marvinhagemeister]

Oh I see, you are interested in using custom elements in fresh.

[dhruv-dabhi-st7]

Oh I see, you are interested in using custom elements in fresh.

Yes so for that i suggest to add a section in the documentation that provides a step-by-step guide on how to create and use a custom elements as a component in a Fresh project

[falvarador]

Hello, I have the same interest. Today I use Astro with Custom Elements, but I have appreciation for Deno Fresh, so I would like to use it, but using Custom Elements. Thanks