Selectors | Lucid.js

Lucid.js / Selectors

Introduction 🔗

Lucid makes heavy use of CSS-like selectors as a means to control the different behaviours of components. Specifically, selectors are used in the following areas:

  • Repeaters - controlling which elements or child components in a component should repeat
  • Conditionals - controlling which elements or child components in a component should be output or not
  • Messaging - messaging between one component and another, via a relative XPath selector from the origin to target component

Syntax 🔗

For repeaters and conditionals, the selectors are used as object keys. For example:

this.conditionals = { p: () => true, 'div span': () => false, Childcomp: () => true };

That says that, within the current compoent, paragraphs should be output, spans inside div elements shouldn't, and Childcomp child components should be output. See Conditionals.

Sandboxing 🔗

Any time selectors are used in Lucid, they are sandboxed (i.e. restricted to) the current component only.

That's why, above, there was no need to prefix the selectors with a reference to the component.

They cannot affect elements in components outside the current component - either higher (parent/ancestor components) in the hierarchy or lower (child/descendant components).

Did I help you? Feel free to be amazing and buy me a coffee on Ko-fi!