ReactiveVariableController
is a convenience wrapper around apollo reactive variables.
Apollo Elements controllers are not limited to Lit. Use them with any object that implements the ReactiveControllerHost
interface. See ControllerHostMixin
for an example.
import { customElement } from 'lit/decorators.js';
import { html, LitElement } from 'lit';
import { ReactiveVariableController } from '@apollo-elements/core';
import { locationVar } from './router.js';
import style from './profile-page.css.js';
@customElement('profile-page')
class ProfilePage extends LitElement {
static styles = style;
router = new ReactiveVariableController(this, locationVar);
render() {
const { username } = this.router.value?.groups ?? {}
return html`
<section ?hidden=${!username}>
<h2>User ${username}</h2>
</section>
`;
}
}
Properties
value
Wraps a reactive variable in a reactive controller for easy integration.
Examples
const locationVar = makeVar({ ...window.location })
installRouter(loc => locationVar({ ...loc }))
class RouterOutlet extends LitElement {
router = new ReactiveVariableController(this, locationVar)
render() {
return html`
<p>Current Path: ${this.router.value.pathname}</p>
`;
}
}
Properties
host
variable
value
Methods
set
Convenient wrapper around reactiveVariable(newVal)Parameters
x
Private Properties
#onNextChange
privateExports
js VariableChangeEvent
from reactive-variable-controller.js
js ReactiveVariableController
from reactive-variable-controller.js