Environment

[markmals]

The environment in WebStd UI is similar to a context system in other JavaScript frameworks. The environment flows in one direction, from a parent EnvironmentKey provider the environment value flows down to children who query the environment using the @Environment decorator.

The environment system is based on the Context Community Protocol by the W3C's Web Components Community Group and should be interoperable with other web component frameworks that utilize the same protocol.

Example usage:

const LibraryKey = new EnvironmentKey({
    key: "library-env",
    defaultValue: new Library(),
})

@CustomElement("app-main")
export class Main implements View {
    localLibrary = new Library()

    get body() {
        return html`
            <library-env .value=${this.localLibrary}>
                <app-child></app-child>
            </library-env>
        `
    }
}

@CustomElement("app-child")
export class Child implements View {
    @Environment(LibraryKey)
    library?: Library

    get body() {
        return html`Books Available: ${this.library?.bookCount}`
    }
}

[markmals]

Closed in 6b2d808