lunaDOM Docs
lunaDOM Docs

lunaDOM is a collection of lightweight, accessible shadowdom based web components built with JavaScript.

v0.0.25

Getting Started

Quick start guide for lunaDOM

lunaDOM is a collection of lightweight, shadowDOM based web components built with JavaScript.

All web components extend the browser's native HTMLElement class.

Installation

Install lunaDOM from GitHub:

npm install github:dmac780/lunaDOM

Using a Single Component

Import and use a component directly in your HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lunaDOM Demo</title> </head> <body> <!-- Use the component --> <luna-button variant="primary">Click Me</luna-button> <!-- Import the component script --> <script type="module" src="node_modules/lunadom/components/button/button.js"></script> </body> </html>

What's Next?

This is personal project. I'm building a lightweight metaframework right now, and I want native shadowdom web components to be the foundation of it.

There are some goals for this component library:

  • All components should be lightweight and fast
  • All components should be shadowDOM encapsulated and not affect the global scope
  • All components should be fully customizable and overridable with CSS variables
  • All components should be easy to use with minimal markup and external configuration
  • All components should be be accessible

Will be working on this in phases. There are some bugs. I will be cleaning them up as I go. I will most likely be adding new components to finish the library first, before I do major testing passes on individual components, as this is currently a recreational project and not sponsored.

I haven't done an accessibility pass yet, and I'm planning on adding a lot of the premium components you find in expensive libraries.

All components will be free and open source. Feel free to contribute, report bugs, or steal code for your own projects.

There is no TypeScript support currently.