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

---

• Core Controllers
  • Dynamic Frame

---

• Why Binder?
• Recipes
• Reference

Registering

In order for a controller to be available in your HTML you first need to register it.

Binder provides a registerControllers function which is a thin wrapper around window.customElements.define (the built in way to register custom elements).

import { registerControllers, Controller } from '/static/js/binder/binder.js';
class MyController extends Controller {};
registerControllers(MyController);

How is the tag name set?

The HTML tag name can be set in a few ways.

1. Declaring a static tag on your controller

import { registerControllers, Controller } from '/static/js/binder/binder.js';

class MyController extends Controller {
    static tag = "my-tag";
};

registerControllers(MyController);

2. Use the wrapper Controller.withTag static method

import { registerControllers, Controller } from '/static/js/binder/binder.js';

class MyController extends Controller {};

registerControllers(MyController.withTag("my-tag"));

3. Letting binder automatically set it from the controller name

import { registerControllers, Controller } from '/static/js/binder/binder.js';

class MyController extends Controller {};

// Controller name is converted to lower kebab case (eg. my-controller)
registerControllers(MyController);

Next: Rendering