ReferenceBuilder

The class ReferenceBuilder provides services to bind a property to a embedded DOM element.

The static method ReferenceBuilder.get(propName) returns a fresh builder. The builder expects the name of the property in camel case.

import {ReferenceBuilder} from '@tmorin/ceb'
// creates the builder
const builder = ReferenceBuilder.get('myInput')

The builder and underlying decorators are also technically documented: ReferenceBuilder.

Default selector

By default, the builder binds the property to a child having the same id. For instance, the property propName is bound to the selector #propName.

The method ReferenceBuilder#selector(selector) can be used to override the default selector.

import {ReferenceBuilder} from '@tmorin/ceb'
// initializes the shadow DOM of the custom element
const builder = ReferenceBuilder.get('myInput').selector('input.my-input')

Bind to list of elements

By default, the builder binds the property to a single element.

The method ReferenceBuilder#array() can be used to bind the property to a list of matching elements.

import {ReferenceBuilder} from '@tmorin/ceb'
// initializes the shadow DOM of the custom element
const builder = ReferenceBuilder.get('activeLiList').selector('li.active').array()

Bind relative to the shadow DOM

By default, the builder binds the property relative to the light DOM.

The method ReferenceBuilder#shadow() can be used to bind the property relative to the shadow DOM.

import {ReferenceBuilder} from '@tmorin/ceb'
// initializes the shadow DOM of the custom element
const builder = ReferenceBuilder.get('button').shadow()

The decorator

References can also be defined using decorators.

import {ElementBuilder, ReferenceBuilder} from '@tmorin/ceb'
// register the custom element
@ElementBuilder.element<MyCustomElement>()
// defines the custom element class
class MyCustomElement extends HTMLElement {
    // define the reference
    @ReferenceBuilder.reference({isShadow: true, selector: 'ul'})
    readonly ul: HTMLUListElement;
}

Example

The registered custom element counts the number of selected li and displays it.

See the Pen </ceb> ~ ReferenceBuilder by Thibault Morin (@tmorin) on CodePen.