BlockquoteControllerContextMeta is a Lit Reactive Controller that encapsulates the controllers provided by @lit/context

Features:

• Allows a component to act simultaneously as a provider and a consumer.
• Delays consumer initialization until after the first update, minimizing the risk of a consumer in the Light DOM requesting a context before a provider is available.

Demo

Usage

• Lit examples context-basics

import { html, LitElement, css } from 'lit';
import { BlockquoteControllerContextMeta } from '@blockquote-web-components/blockquote-controller-context-meta';

export class ProviderEl extends LitElement {
  static styles = css`
    slot {
      display: block;
      border: dashed 4px grey;
      padding: 10px;
    }

    :host {
      display: block;
      border: solid 4px gainsboro;
      padding: 2px;
    }

    h3 {
      margin-top: 0;
    }
  `;

  static properties = {
    data: {},
  };

  constructor() {
    super();
    this._provider = new BlockquoteControllerContextMeta(this, {
      context: Symbol.for('contextKey')
    });

    this.data = 'Initial';
  }

   // `data` will be provided to any consumer that is in the DOM tree below it.
  set data(value) {
    this._data = value;
    this._provider.setValue(value);
  }

  get data() {
    return this._data;
  }

  render() {
    return html`
      <h3>Provider's data: <code>${this.data}</code></h3>
      <slot></slot>
    `;
  }
}
customElements.define('provider-el', ProviderEl);

export class ConsumerEl extends LitElement {
  _consumer = new BlockquoteControllerContextMeta(this, {
    context: Symbol.for('contextKey')
    callback: (v) => {
      this.setAttribute('data-callback', v);
    },
  });


  // `providedData` will be populated by the first ancestor element which
  // provides a value for `context`.

  get providedData() {
    return this._consumer.value;
  }

  render() {
    return html`<h3>Consumer data: <code>${this.providedData}</code></h3>
      <hr />
      <slot></slot>`;
  }
}
customElements.define('consumer-el', ConsumerEl);

src/BlockquoteControllerContextMeta.js:

class: ContextMeta

Fields

| Name | Privacy | Type | Default | Description | Inherited From | | -------------- | ------- | ---- | -------------- | ----------- | -------------- | | value | | | | | | | context | | | | | | | initialValue | | | initialValue | | | | callback | | | callback | | | | host | | | host | | |

Methods

| Name | Privacy | Description | Parameters | Return | Inherited From | | --------------- | ------- | ----------- | ---------- | ------ | -------------- | | setValue | | | v, force | | | | hostConnected | | | | | |

Variables

| Name | Description | Type | | ------------------- | ----------- | ---- | | contextMetaSymbol | | |

Exports

| Kind | Name | Declaration | Module | Package | | ---- | --------------------------------- | ----------------- | -------------------------------------- | ------- | | js | contextMetaSymbol | contextMetaSymbol | src/BlockquoteControllerContextMeta.js | | | js | BlockquoteControllerContextMeta | ContextMeta | src/BlockquoteControllerContextMeta.js | |

src/index.js:

Exports

| Kind | Name | Declaration | Module | Package | | ---- | --------------------------------- | ------------------------------- | ------------------------------------------- | ------- | | js | BlockquoteControllerContextMeta | BlockquoteControllerContextMeta | ./BlockquoteControllerContextMeta.js | | | js | BaseContextMetaElement | BaseContextMetaElement | ./BaseContextMetaElement.js | | | js | contextMetaProvider | contextMetaProvider | ./directives/context-meta-provider.js | | | js | cacheContextMetaProvider | cacheContextMetaProvider | ./directives/cache-context-meta-provider.js | |

contextMetaProviderDirective is a Lit directive that enables normal DOM elements to act as context providers. You can use this directive in both attribute and element bindings in Lit templates.

https://github.com/lit/lit/discussions/4690

Usage: This directive transforms a DOM element into a Lit context provider using the BlockquoteControllerContextMeta class, a Lit Reactive Controller that encapsulates controllers provided by @lit/context.

Features

• Enables non-Lit elements to provide context.
• Works seamlessly with @lit/context.
• Utilizes BlockquoteControllerContextMeta, a Lit Reactive Controller for managing context.

  <div ${contextMetaProviderDirective(someValue, myContext)}>
    <!-- Children can consume the provided context -->
  </div>
  //
  <div data-info="${contextMetaProviderDirective(someValue, myContext)}">
    <!-- Children can consume the provided context -->
  </div>

src/directives/context-meta-provider.js:

class: README

Variables

| Name | Description | Type | | --------------------- | ----------- | ---- | | contextMetaProvider | | |

Exports

| Kind | Name | Declaration | Module | Package | | ---- | --------------------- | ------------------- | --------------------------------------- | ------- | | js | README | README | src/directives/context-meta-provider.js | | | js | contextMetaProvider | contextMetaProvider | src/directives/context-meta-provider.js | |

src/directives/cache-context-meta-provider.js:

Functions

| Name | Description | Parameters | Return | | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------ | | cacheContextMetaProvider | Return or create a cached BlockquoteControllerContextMeta for (element, context). This function memoizes BlockquoteControllerContextMeta instances per (element, contextKey). If a BlockquoteControllerContextMeta already exists for the given element and context, it is returned; otherwise a new BlockquoteControllerContextMeta is created, cached and returned. | element: HTMLElement\|*, {context = contextMetaSymbol, initialValue}, arg: { * context?: *, * initialValue?: ContextType<*>, * } | |

Exports

| Kind | Name | Declaration | Module | Package | | ---- | -------------------------- | ------------------------ | --------------------------------------------- | ------- | | js | cacheContextMetaProvider | cacheContextMetaProvider | src/directives/cache-context-meta-provider.js | |

BaseContextMetaElement emulates the behavior of a flow element using ARIA, preserving standard HTML functionality while enhancing its features.

Demo

Features

• Acts as a structural element that follows HTML flow content rules.
• Provides a default ARIA role (none) to avoid unintended semantics.
• Can be used as a wrapper for contextual metadata.

Accessibility

By default, BaseContextMetaElement assigns the role="none", ensuring that it does not introduce unintended semantics in assistive technologies. This behavior can be overridden by explicitly setting a different role.

Related: ARIA Structural Roles

Inspired by the discussion: Is it possible to make normal DOM elements context providers? See Also: contextmeta provider directive

With this setup, BaseContextMetaElement behaves like a flow element.

src/BaseContextMetaElement.js:

class: BaseContextMetaElement, base-context-meta

Exports

| Kind | Name | Declaration | Module | Package | | --------------------------- | ------------------------ | ---------------------- | ----------------------------- | ------- | | js | BaseContextMetaElement | BaseContextMetaElement | src/BaseContextMetaElement.js | | | custom-element-definition | base-context-meta | BaseContextMetaElement | src/BaseContextMetaElement.js | |