• Introduction
• Our First Controller
• Registering
• Rendering
• Arguments
• Events
• Binding Elements
• Observed Attributes
• Lifecycle
• The Shadow DOM

---

• Core Controllers
  • Dynamic Frame

---

• Why Binder?
• Recipes
• Reference

Our First Controller

Custom Elements are a way to create custom HTML elements, binder helps simplify the process of creating new elements, managing their state and handling events.

In binder we call our custom elements Controllers.
There are two parts to a controller, the HTML and the JavaScript class behind it.

<!-- This is our custom element -->
<our-first-controller></our-first-controller>

<script type="module">
    import { Controller, registerControllers } from "/static/js/binder/binder.js";

    // This class defines the logic behind our element
    class OurFirstController extends Controller {
        // The init method is called when a new element is added to the DOM
        init() {
            // Put your set up code here
            this.innerHTML = "<p>Hello, World!</p>";
        }
    }

    // We need to "register" all controllers, this is what connects up the HTML to the JavaScript
    registerControllers(OurFirstController);
</script>

This is a bit of boring example but we'll look at some real use cases later.

Next: Registering