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

Index

Constructors

Properties

Methods

Constructors

Private constructor

  • Type parameters

    • E: HTMLElement = HTMLElement

    Returns AttributePropagationBuilder<E>

Properties

Private Readonly _attrBuilder

_attrBuilder: any

Private Readonly _fromAttrName

_fromAttrName: any

Private _isShadow

_isShadow: any

Private Optional _selector

_selector?: any

Private _toAttrName

_toAttrName: any

Private Optional _toPropName

_toPropName?: any

Private propagateValue

propagateValue: any

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

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

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

  • Provide a fresh builder.

    Type parameters

    • E: HTMLElement

      the type of the Custom Element

    Parameters

    Returns AttributePropagationBuilder<E>

Generated using TypeDoc