Options
All
  • Public
  • Public/Protected
  • All
Menu

The builder enhances a readonly property to execute a CSS Selector once the property is get. So that, a property of the Custom Element can always be related to a child element or a set of child elements.

By default, the CSS selector targets a child element by its identifier (i.e. the attribute id) : #<PROPERTY NAME>. The default CSS selector can be overridden with ReferenceBuilder.selector.

By default, the selector targets only one child element, i.e. querySelector(....). However, a selection of many child nodes, can be done with ReferenceBuilder.array, i.e. querySelectorAll(....).

By default, the selection is done into the Light DOM. Nevertheless, the selection can be done into the Shadow DOM with ReferenceBuilder.shadow.

By default, the property type should be a specialization of Element. When the option ReferenceBuilder.array is used, the property type must be an Array of Element specializations.

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 ReferenceBuilder.decorate.

Type parameters

  • E: HTMLElement = HTMLElement

    the type of the Custom Element

Hierarchy

  • ReferenceBuilder

Implements

  • Builder<E>

Index

Constructors

Private constructor

  • new ReferenceBuilder<E>(_propName?: string, _selectors?: string, _isArray?: boolean, _isShadow?: boolean): ReferenceBuilder<E>

Methods

array

  • Switch to the Array type. In this case, the output is an array of matched elements.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {ReferenceBuilder} from "@tmorin/ceb-elements-builders"
    class CebExample extends HTMLElement {
    readonly liElements: Array<HTMLLiElement>
    connectedCallback() {
    this.innerHTML = `<ul>
    <li>Item A</li>
    <li>Item B</li>>
    </ul>`
    }
    }
    ElementBuilder.get(CebExample).builder(
    ReferenceBuilder.get("inputElement").selector('li').array()
    ).register()

    Returns ReferenceBuilder<E>

Protected build

  • build(Constructor: CustomElementConstructor<E>, hooks: HooksRegistration<E>): void

decorate

  • decorate(): PropertyDecorator
  • Property decorator used to define a property reference.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {ReferenceBuilder} from "@tmorin/ceb-elements-builders"
    @ElementBuilder.get<HelloWorld>().decorate()
    class HelloWorld extends HTMLElement {
    @ReferenceBuilder.get("inputElement")
    .shadow()
    .selector('input')
    .decorate()
    readonly nameInput: HTMLInputElement
    connectedCallback() {
    this.attachShadow({mode: "open"})
    this.shadowRoot.innerHTML = `Hello, <input value="World">!`
    }
    }

    Returns PropertyDecorator

selector

  • The CSS selector used to identify the child element(s).

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

    Parameters

    • selector: string

      the CSS selector

    Returns ReferenceBuilder<E>

shadow

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

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

    Returns ReferenceBuilder<E>

Static get

Generated using TypeDoc