PropertyDelegateBuilder

The class PropertyDelegateBuilder provides services to delegate the accesses of a property to a single target (i.e. a child node).

The static method PropertyDelegateBuilder.get(propName) returns a fresh builder. The builder expects the name of a property.

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

Alternatively, DelegateBuilder.property(propName) can also be used.

import {DelegateBuilder} from '@tmorin/ceb'
// creates the builder
const builder = DelegateBuilder.property('aProperty')

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

Set the selector

The method PropertyDelegateBuilder#to(selector) has to be used to define the selector. The selector is mandatory otherwise the builder won't be able to identify the targets.

import {PropertyDelegateBuilder} from '@tmorin/ceb'
// delegate the accesses to the property 'aProperty'
const builder = PropertyDelegateBuilder.get('aProperty')
    .to('button');

Shadow DOM

By default, the builder selects targets relative to the light DOM.

The method PropertyDelegateBuilder#shadow() can be used to select targets relative to the shadow DOM.

import {PropertyDelegateBuilder} from '@tmorin/ceb'
// delegate the accesses to the property 'aProperty'
const builder = PropertyDelegateBuilder.get('aProperty')
    .to('button')
    .shadow();

Bind to another property

By default, the builder mutates the same targets' property.

The method PropertyDelegateBuilder#property(toPropName) can be used to force another property name.

import {PropertyDelegateBuilder} from '@tmorin/ceb'
// delegate the accesses to the property 'aProperty'
const builder = PropertyDelegateBuilder.get('aProperty')
    .to('button')
    .property('anotherProperty');

Bind to an attribute

The method PropertyDelegateBuilder#attribute(toAttrName) can be used to force the mutation of a attribute.

import {PropertyDelegateBuilder} from '@tmorin/ceb'
// delegate the accesses to the property 'aProperty'
const builder = PropertyDelegateBuilder.get('aProperty')
    .to('button')
    .attribute('an-attribute');

The option PropertyDelegateBuilder#boolean() can be used if the attribute is a boolean.

import {PropertyDelegateBuilder} from '@tmorin/ceb'
// delegate the accesses to the property 'aProperty'
const builder = PropertyDelegateBuilder.get('aProperty')
    .to('button')
    .attribute('a-boolean-attribute')
    .boolean();

The decorator

Property delegations can also be defined using a decorator.

import {ElementBuilder, PropertyDelegateBuilder} from '@tmorin/ceb'
// register the custom element
@ElementBuilder.element<MyCustomElement>()
// defines the custom element class
class MyCustomElement extends HTMLElement {
    // define an attribute delegation
    @PropertyDelegateBuilder.delegate('input')
    aProperty = 'a value'
}

Example

The registered custom element is composed of an input. The boolean property disabled is delegated to both input. The property placeholder is delegated to the placeholder attribute of the input.

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