How to get started with bausteine

It's easy to get started. Just use the following command and code to set up and start your first project:

npm i bausteine
Copy

import createWebComponent from "bausteine";
Copy

and create a Component like a Button:

export default function Button() { 
  createWebComponent(
    "bau-button", 
    () => { return html`<slot>Default</slot>`; },
    { extendsFrom: "button" }
  ) 
}
Copy

Please note two things here:

• The package is using the html function from hydro-js. They are closely integrated, so in order to make reactivity work, it would be great to develop with it as well.
• See the extendsFrom option? This is used for Custom Elements Builtin. This is however not supported on Safari (ref and ref), but there is a polyfill.

This is how the usage could look like:

<button is="bau-button" class="inline-block border p-4" ${propsButton}>
  Test HTML
</button>
Copy