Closed ala-n closed 4 months ago
Note/Question 1: the name of the attribute
closest
( @attr({ closest: 'alt-ignore' }) public ignore;
) ( 2 0 0 1 3 0 3 3 3 0 0 0 )inherit
( @attr({ inherit: 'alt-ignore' }) public ignore;
) ( 1 3 3 2 0 3 0 0 0 3 3 3 )Igea: suffix 'closestAttr'
CC: @NastaLeo , @exadel-inc/esl-core-maintainers
Note / Question 2: the logic is designed to use closed attribute finding, which includes the current element as a first target element.
@attr({ closest: 'alt-ignore' }) public ignore;
<div alt-ignore="nope">
<cust-el alt-ignore="hi"> // $0
</div>
$0.ignore // hi
CC: @NastaLeo , @exadel-inc/esl-core-maintainers
To summarize the question above according to the final discussions/votings:
Tast cases:
// 1. Inherit does not affect own attribute resolution
// 1.1. Own attribute getter returns own value (independently of parent DOM structure)
// 1.2. Own attribute setter changes the own value
// 2. Inherit searches for the closest element with explicitly declared name (inherit: string) in DOM to find the value
// 2.1. The value resoles from the closest element in DOM if there is no own value
// 2.2. The value can be resolved from own custom attribute (has own attribute declared by inherit)
// 2.3. `dataAttr` parameter does not affect the search of the closest element in DOM
// 3. Inherit searches for the closest element with the same attribute name in DOM to find the value (inherit: true)
// 3.1. The value resoles from the closest element in DOM if there is no own value
// 3.2. `dataAttr` parameter affects both own attribute and the search of the closest element in DOM
// 4. If there is no closest element with declared attribute name in DOM, the getter returns default value
:tada: This issue has been resolved in version 5.0.0-beta.11 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
As an ESL consumer, I want to have utilities to support common ESL component mechanics with an attribute property DOM-based inheritance.
It is proposed to extend
@attr
decorator with ability to declareinherit
(named according discussion `1) attribute to inherit value:Setter behavior does not affected, so
$el.myAttr = 'hi'
leads to own attribute mutation ignoring any inheritance logic.Getter behavior should be updated according following cases: 2.1. closest/inheritance feature is disabled initially, so no changes in existing
@attr
behavior2.2. if the element have a declared own attribute the closest/inheritance logic does not affect getter value. In other words, one's own attribute has a priority over resolved by inheritance logic.
2.3. when the
inherit
prop is declared with a booleantrue
value, the value is expected to be inherited from the closest parent attribute with the same name as current attribute declared.@attr({ inherit: true }) public ignore;
- findsignore
attr on this element or closest parent with attributeignore
@attr({ inherit: true, dataAttr: true }) public ignore;
- findsdata-ignore
attr on this element or closest parent withdata-ignore
attribute2.4. when the
inherit
prop is declared as a string, it is interpreted as an inherited attribute name to find the closest parent.@attr({ inherit: 'alt-ignore' }) public ignore;
- usesignore
attr on this element or closest parent withalt-ignore
attribute@attr({ inherit: 'alt-ignore', dataAttr: true }) public ignore;
- usesdata-ignore
attr on this element or closest parent withalt-ignore
attribute