bem

bem<T>(config): (value, context) => T

Defined in: packages/webcomponents/src/bem.js:27

Standard (TC39) class decorator that makes a custom element a BEM component — the web-components analog of @bem-broom/react’s withBem, and a thin adapter over the BemElement mixin. Unlike @bem-broom/lit’s decorator it needs no Lit host: it drives the custom-element lifecycle directly, so it runs on a bare HTMLElement. It:

• reads the block from context (an ancestor’s element, or none at the root),
• applies the computed BEM class(es) to the host element,
• provides config.element as the block for descendants (re-rooting),
• observes config.modifiers as attributes and recomputes on change.

Apply it below a registration decorator (or register the wrapped class yourself), since a class decorator returns the wrapped subclass:

@bem({ element: 'card', modifiers: ['active'] })
class Card extends HTMLElement {}
customElements.define('bb-card', Card);

Type Parameters

T

T extends (…args) => HTMLElement

Parameters

config

BemElementConfig

Returns

(value, context) => T