A. slice initialization, change on event

initial value should be 0; + and - should change the number in input field

        <custom-element>
            <template>
                <button slice="clickcount" slice-event="click" slice-value="//clickcount + 1">
                    +
                </button>
                <button slice="clickcount" slice-event="click" slice-value="//clickcount - 1">
                    -
                </button>
                <input slice="clickcount" type="number" value="{//clickcount ?? 0}">
                {//clickcount}
            </template>
        </custom-element>
    
0

B. slice event data.

move the mouse over TEXTAREA and click to see slice and slice event changed

        <custom-element>
            <template>
                <textarea slice="s" slice-value="concat('x:', //@pageX)" slice-event="mousemove click" style="width:16rem;height:16rem;box-shadow: inset {//@offsetX}px {//@offsetY}px gold;"></textarea><br>
                //slice/s : {//slice/s}   <br>
                //slice/s/event/@offsetY: {//slice/s/event/@offsetY}  <br>
                event type:{//slice/s/event/@type}
            </template>
        </custom-element>
    

//slice/s :
//slice/s/event/@offsetY:
event type:

1. slice change on event. 1:1 slice⮂value

initial value blank; type and unfocus to see slice changed


        <custom-element>
            <input slice="typed"> //slice/typed : {//slice/typed}
        </custom-element>
    
//slice/typed :

2. initial slice value, slice change on event. slice⮂value, w/ initial

initial value from input; type and unfocus to see slice changed

        <custom-element>
            <input slice="s" value="{//s ?? 'B'}"> //slice/s : {//slice/s}
        </custom-element>
    
//slice/s : B

3. initial slice value, slice change on event. slice⮂value, w/ initial

initial value from input; type to see slice changed

        <custom-element>
            <input slice="s" value="{//s ?? 'B'}" slice-event="input"> //slice/s : {//slice/s}
        </custom-element>
    
//slice/s :

4. initial slice value from attribute, slice change on event.

initial value from input; type to see slice changed

        <custom-element tag="dce-1">
            <template>
                <attribute name="a">😁</attribute>
                <input slice="s" value="{//s ?? $a}" slice-event="keyup">
                attribute 'a' : {$a}
                //slice/s : {//slice/s}
            </template>
        </custom-element>
        <dce-1></dce-1>
        <dce-1 a="🤗"></dce-1>
    
attribute 'a' : 😁 //slice/s : attribute 'a' : 🤗 //slice/s :

5. initial slice value from attribute, slice change on event.

initial value from input as 'xB'; type and unfocus to see slice changed

        <custom-element>
            <template>
                <input slice="s" value="{substring(//s, 2) ?? 'B'}" slice-value="concat('x', @value )">
                //slice/s : {//slice/s}
            </template>
        </custom-element>
    
//slice/s : xB

6. initial slice value from input, button ignored till change on click.

initial value from input as 'anonymous'; on button click change to 'broccoli'

        <custom-element>
            <template>
            <input slice="nickname" value="anonymous">
            <button slice="nickname" slice-value="'broccoli'" slice-event="click">🥦</button>
            {//nickname}
            </template>
        </custom-element>
    
anonymous

7. initial slice value from SLICE element, button ignored till change on click.

synthetic SLICE element serves as initial value holder

        <custom-element>
            <template>
                <button slice="clickcount" slice-event="click tap" slice-value="//clickcount + 1">
                    <slice slice="clickcount" value="0"></slice>
                     click/tap
                </button>
                //clickcount : {//clickcount}
            </template>
        </custom-element>
    
//clickcount :

8. multiple slices by SLICE element, button ignored till change on click.

synthetic SLICE elements serve as initial value holder

        <custom-element>
            <template>
                <button>
                    <slice slice="clicked" value="{0}"></slice>
                    <slice slice="focused" value="{0}"></slice>
                    <slice slice-event="click tap" slice="clicked" slice-value="//clicked+1"></slice>
                    <slice slice-event="focus" slice="focused" slice-value="1"></slice>
                    <slice slice-event="blur" slice="focused" slice-value="0"></slice>
                     click/tap, focus/blur
                </button> <br>
                //clicked : {//clicked} <br>
                //focused : {//focused}
            </template>
        </custom-element>
    

//clicked :
//focused :

9. slice in attribute

initial attribute value should be smile as emoji and :) on blur from input it should be updated from value

        <custom-element tag="emotional-element">
            <template>
                <attribute name="emotion" select="//emotion ?? '😃'"></attribute>
                <input slice="/datadom/attributes/emotion">
                Type and unfocus to update emotion attribute: {emotion}
            </template>
        </custom-element>
        <emotional-element emotion=":)"></emotional-element>
        <emotional-element></emotional-element>
    
Type and unfocus to update emotion attribute: :) Type and unfocus to update emotion attribute:

10. multiple slices by same field

same element value sets s1 and s2 slice

        <custom-element>
        <template>
            <input slice="s1|s2" slice-event="input" data-testid="f1"><br>
            Type to update s1 and s2 slices <br>
            slice <code>s1: {//slice/s1}</code><br>
            slice <code>s2: {//slice/s2}</code><br>
        </template>
    </custom-element>
    

Type to update s1 and s2 slices
slice s1:
slice s2:

11. slices and attribute

initial attribute value should be smile as emoji and :) on blur from input it should be updated from value

        <custom-element>
            <template>
                <attribute name="emotion">😃</attribute>
                <input slice="/datadom/attributes/emotion | s1">
                Type and unfocus to update emotion attribute: {emotion}
                and slice: {//slice/s1}
            </template>
        </custom-element>
    
Type and unfocus to update emotion attribute: 😃 and slice:

12. checkbox use

The value is empty when unchecked. Otherwise taken either from slice-value or value attribute.

Check the box to see the value in slice


        <custom-element>
            <template>
                <input type="checkbox" slice="is-checked" value="V0" checked="">
                slice: {/datadom/slice/is-checked} <br>
                <xsl:variable name="v1">V1</xsl:variable> <br>
                $v1={$v1}<br>

                <!-- slice-variable is XPath. $v1 is available only in template, embedding trick -->
                <input type="checkbox" slice="s2" slice-value="'{$v1}'">
                slice 2: {//s2} <br>

                <!-- variable is used in template scope -->
                <input type="checkbox" slice="s3" value="{$v1}">
                slice 3: {//s3}
            </template>
        </custom-element>
    
slice: V0

$v1=V1
slice 2:
slice 3:

13. Radio group

The value propagated into slice from the last checked radiobutton.

Check the radiobutton to see the value in slice


        <custom-element>
            <template>
                V0: <input type="radio" slice="radio-group" value="V0" name="g1"> <br>
                V1: <input type="radio" slice="radio-group" value="V1" name="g1" checked=""> <br>
                slice: {//radio-group} <br>
            </template>
        </custom-element>
    
V0:
V1:
slice: V1