<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>
<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>
<custom-element>
<input slice="typed"> //slice/typed : {//slice/typed}
</custom-element>
<custom-element>
<input slice="s" value="{//s ?? 'B'}"> //slice/s : {//slice/s}
</custom-element>
<custom-element>
<input slice="s" value="{//s ?? 'B'}" slice-event="input"> //slice/s : {//slice/s}
</custom-element>
<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>
<custom-element>
<template>
<input slice="s" value="{substring(//s, 2) ?? 'B'}" slice-value="concat('x', @value )">
//slice/s : {//slice/s}
</template>
</custom-element>
<custom-element>
<template>
<input slice="nickname" value="anonymous">
<button slice="nickname" slice-value="'broccoli'" slice-event="click">🥦</button>
{//nickname}
</template>
</custom-element>
<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>
<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>
<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>
<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>
s1:
s2:
s1: {//slice/s1}
s2: {//slice/s2}
<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>
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>
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>