Directives that are Controllers--Examples?

[chen-ye]

The lit docs mention the possibility of 'controller directives'--directives that are themselves controllers. Is there an example of how this works in practice?

I'm skimming the relevant docs, and I don't understand how a directive could implement addController, since the directive API doesn't expose the host. How is this supposed to work?

[augustjk]

I don't think we have an example in the docs site but the @lit-labs/motion package's animate directive is written as a controller directive.

lit/packages/labs/motion/src/animate.ts

Lines 227 to 240 in c28cb6e

	override update(part: AttributePart, [options]: Parameters<this['render']>) {
	const firstUpdate = this._host === undefined;
	if (firstUpdate) {
	this._host = part.options?.host as LitElement;
	this._host.addController(this);
	this.element = part.element;
	nodeToAnimateMap.set(this.element, this);
	}
	this.optionsOrCallback = options;
	if (firstUpdate || typeof options !== 'function') {
	this._setOptions(options as Options);
	}
	return this.render(options);
	}

[chen-ye]

Excellent, thanks!

[bennypowers]

I'm interested in the opposite as well - controllers that surface directives. Could this be used to implement ui patterns like accessible listboxes without strong opinions about DOM structure?

[tbroyer]

Isn't @lit-labs/tasks such a "controller that own directive"?

[justinfagnani]

Task isn't actually. It's .render() method is just a plain function.

I don't know if we have an example of this in our codebase right now. We had some prototypes of observers that did this.

The basic idea is that you have a central controller and a method that returns a directive and can be used on child elements.

[augustjk]

The final form adapter POC I did here #2489 (comment) uses a controller that owns and surfaces a directive for binding to elements.

[bennypowers]

@nikkimk this example could be illustrative for a listbox controller.