Options
All
  • Public
  • Public/Protected
  • All
Menu

Class PropertyDelegationBuilder<E>

The builder delegates the accesses of a property to an embedded element.

The CSS selector which targets the embedded element is handled with PropertyDelegationBuilder.to.

By default, the propagation selects an element in the Light DOM. Nevertheless, the selection can be done into the Shadow DOM with PropertyDelegationBuilder.shadow.

By default, the accesses are delegated to the target's property which matches the same name. However, the targeted property name can be changed with PropertyDelegationBuilder.property.

Moreover, instead of delegating to a property, the accesses can be delegated to an attribute using PropertyDelegationBuilder.attribute. In that case, the value can only be a string or a boolean. If the value is a boolean, then it has to be expressed with PropertyDelegationBuilder.boolean

Both PropertyDelegationBuilder.attribute and PropertyDelegationBuilder.property are exclusive.

Finally, the builder can be registered using the method ElementBuilder.builder of the main builder (i.e. ElementBuilder). However, it can also be registered with the decorative style using the decorator PropertyDelegationBuilder.decorate.

Type parameters

  • E: HTMLElement = HTMLElement

    the type of the Custom Element

Hierarchy

  • PropertyDelegationBuilder

Implements

Index

Constructors

Properties

Methods

Constructors

Private constructor

  • Type parameters

    • E: HTMLElement = HTMLElement

    Returns PropertyDelegationBuilder<E>

Properties

Private _isBoolean

_isBoolean: any

Private _isShadow

_isShadow: any

Private Optional _propName

_propName?: any

Private Optional _selector

_selector?: any

Private Optional _toAttrName

_toAttrName?: any

Private Optional _toPropName

_toPropName?: any

Methods

attribute

  • Delegate the access to an attribute.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {PropertyDelegationBuilder} from "@tmorin/ceb-elements-builders"
    class HelloWorld extends HTMLElement {
        name = "World"
        connectedCallback() {
            this.innerHTML = `Hello, <input readonly>!`
        }
    }
    ElementBuilder.get(HelloWorld).builder(
        PropertyDelegationBuilder.get("name")
            .to("input").attribute("value")
    ).register()

    Parameters

    • toAttrName: string

      the attribute name.

    Returns PropertyDelegationBuilder<E>

boolean

  • When targeting an attribute, switch the boolean mode.

    When the value is truthy, the attribute's value is "". When the value is falsy, the attribute is removed.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {PropertyDelegationBuilder} from "@tmorin/ceb-elements-builders"
    class HelloWorld extends HTMLElement {
        frozen = tue
        connectedCallback() {
            this.innerHTML = `Hello, <input value="World">!`
        }
    }
    ElementBuilder.get(HelloWorld).builder(
        PropertyDelegationBuilder.get("frozen")
            .to("input").attribute("readonly").boolean()
    ).register()

    Returns PropertyDelegationBuilder<E>

Protected build

decorate

  • decorate(): PropertyDecorator

  • Property decorator used to define a property delegation.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {PropertyDelegationBuilder} from "@tmorin/ceb-elements-builders"
    @ElementBuilder.get<HelloWorld>().decorate()
    class HelloWorld extends HTMLElement {
        @PropertyDelegationBuilder.get()
            .to("span")
            .property("textContent")
            .decorate()
        name = "World"
        connectedCallback() {
            this.innerHTML = `Hello, <span></span>!`
        }
    }

    Returns PropertyDecorator

property

  • Override the property name.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {PropertyDelegationBuilder} from "@tmorin/ceb-elements-builders"
    class HelloWorld extends HTMLElement {
        name = "World"
        connectedCallback() {
            this.innerHTML = `Hello, <input readonly>!`
        }
    }
    ElementBuilder.get(HelloWorld).builder(
        PropertyDelegationBuilder.get("name")
            .to("input").property("value")
    ).register()

    Parameters

    • toPropName: string

      the property name.

    Returns PropertyDelegationBuilder<E>

shadow

  • By default, the selection of the target element is done in the light DOM. This option forces the selection into the shadow DOM.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {PropertyDelegationBuilder} from "@tmorin/ceb-elements-builders"
    class HelloWorld extends HTMLElement {
        value = "World"
        connectedCallback() {
            this.attachShadow({mode: "open"})
            this.shadowRoot.innerHTML = `Hello, <input readonly>!`
        }
    }
    ElementBuilder.get(HelloWorld).builder(
        PropertyDelegationBuilder.get("value")
            .to("input")
            .shadow()
    ).register()

    Returns PropertyDelegationBuilder<E>

to

  • Define the select element

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {PropertyDelegationBuilder} from "@tmorin/ceb-elements-builders"
    class HelloWorld extends HTMLElement {
        value = "World"
        connectedCallback() {
            this.innerHTML = `Hello, <input readonly>!`
        }
    }
    ElementBuilder.get(HelloWorld).builder(
        PropertyDelegationBuilder.get("value").to("input")
    ).register()

    Parameters

    • selector: string

      the CSS selector

    Returns PropertyDelegationBuilder<E>

Static get

  • Provide a fresh builder.

    Type parameters

    • E: HTMLElement

      the type of the Custom Element

    Parameters

    Returns PropertyDelegationBuilder<E>

Generated using TypeDoc