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.

lit/lit#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