Options
All
  • Public
  • Public/Protected
  • All
Menu

Class AttributePropagationBuilder<E>

The builder handles the propagation of an attribute's values to embedded elements. That means, each time the attribute is mutated, the mutation is propagated to selected child nodes.

The attribute can be provided using its name or with an existing AttributeBuilder instance.

The CSS selector which targets the embedded elements is handled with AttributePropagationBuilder.to.

By default, the propagation selects elements in the Light DOM. Nevertheless, the selection can be done into the Shadow DOM with AttributePropagationBuilder.shadow.

By default, the propagation mutates the targets' attribute which matches the same name. However, the targeted attribute name can be changed with AttributePropagationBuilder.attribute. Moreover, instead of mutating an attribute, the propagation can mutate a property using AttributePropagationBuilder.property.

Both AttributePropagationBuilder.attribute and AttributePropagationBuilder.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 AttributePropagationBuilder.decorate.

Type parameters

  • E: HTMLElement = HTMLElement

    the type of the Custom Element

Hierarchy

  • AttributePropagationBuilder

Implements

  • Builder<E>

Index

Constructors

Methods

Constructors

Private constructor

  • new AttributePropagationBuilder<E>(_attrBuilder: AttributeBuilder<E>, _fromAttrName?: undefined | string, _toAttrName?: undefined | string, _toPropName?: string, _selector?: string, _isShadow?: boolean): AttributePropagationBuilder<E>

Methods

attribute

  • Change the targeted attribute name.

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

    Parameters

    • toAttrName: string

      the attribute name.

    Returns AttributePropagationBuilder<E>

Protected build

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

decorate

  • decorate<T>(): ClassDecorator

  • Class decorator used to define an attribute propagation.

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

    Type parameters

    • T: HTMLElement

    Returns ClassDecorator

Private propagateValue

  • propagateValue(el: E, newVal: any): void

property

  • Propagate to a property.

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

    Parameters

    • toPropName: string

      the property name.

    Returns AttributePropagationBuilder<E>

shadow

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

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

    Returns AttributePropagationBuilder<E>

to

  • The CSS selector used to select the DOM elements.

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

    Parameters

    • selector: string

      the CSS selector

    Returns AttributePropagationBuilder<E>

Static get

Generated using TypeDoc