shadow-h4x

This is a lifecycle implementation of CustomElements for standard-conforming WebComponents.

Getting started

To install shadow-h4x into your project, simply run

npm install @yhwh-script/shadow-h4x

How-To

Please stick to the following conventions! When working with Vite (recommended), put your components into public/components folder. Then add a generate script command to your package.json:

  "scripts": {
    "dev": "npm run generate && vite",
    "build": "npm run generate && vite build",
    "preview": "vite preview",
    "generate": "node node_modules/@yhwh-script/shadow-h4x/generate.cjs"
  }

Then run

npm run dev

This will autogenerate a map of your WebComponents inside the src/components folder.

Finally import shadow-h4x:

<script type="module">
    import('@yhwh-script/shadow-h4x')
</script>

After importing shadow-h4x your WebComponents will be defined in the CustemElements registry. This is a feature! You don't have to register your elements manually. Just put them into the public folder. Important! Each WebComponent must be located in a subfolder under public/components, for instance: public/components/router/router-app.html.