@epa-wg/custom-element
Version:
Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating
254 lines (227 loc) • 10.1 kB
HTML
<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Data slices - Declarative Custom Element implementation demo</title>
<link rel="icon" href="./wc-square.svg"/>
<script type="module" src="../http-request.js"></script>
<script type="module" src="../custom-element.js"></script>
<style>
@import "./demo.css";
</style>
</head>
<body>
<nav>
<a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
<h3>Data slices propagation by events.</h3>
</nav>
<html-demo-element legend="A. slice initialization, change on event"
description="initial value should be 0; + and - should change the number in input field">
<template>
<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>
</template>
</html-demo-element>
<html-demo-element legend="B. slice event data."
description="move the mouse over TEXTAREA and click to see slice and slice event changed">
<template>
<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>
</template>
</html-demo-element>
<html-demo-element legend="1. slice change on event. 1:1 slice⮂value"
description="initial value blank; type and unfocus to see slice changed">
<template>
<custom-element>
<input slice="typed" /> //slice/typed : {//slice/typed}
</custom-element>
</template>
</html-demo-element>
<html-demo-element legend="2. initial slice value, slice change on event. slice⮂value, w/ initial"
description="initial value from input; type and unfocus to see slice changed">
<template>
<custom-element>
<input slice="s" value="{//s ?? 'B'}" /> //slice/s : {//slice/s}
</custom-element>
</template>
</html-demo-element>
<html-demo-element legend="3. initial slice value, slice change on event. slice⮂value, w/ initial"
description="initial value from input; type to see slice changed">
<template>
<custom-element>
<input slice="s" value="{//s ?? 'B'}" slice-event="input"/> //slice/s : {//slice/s}
</custom-element>
</template>
</html-demo-element>
<html-demo-element legend="4. initial slice value from attribute, slice change on event."
description="initial value from input; type to see slice changed">
<template>
<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>
</template>
</html-demo-element>
<html-demo-element legend="5. initial slice value from attribute, slice change on event."
description="initial value from input as 'xB'; type and unfocus to see slice changed">
<template>
<custom-element>
<template>
<input slice="s" value="{substring(//s, 2) ?? 'B'}" slice-value="concat('x', @value )" />
//slice/s : {//slice/s}
</template>
</custom-element>
</template>
</html-demo-element>
<html-demo-element legend="6. initial slice value from input, button ignored till change on click."
description="initial value from input as 'anonymous'; on button click change to 'broccoli'">
<template>
<custom-element>
<template>
<input slice="nickname" value="anonymous" />
<button slice="nickname" slice-value="'broccoli'" slice-event="click">🥦</button>
{//nickname}
</template>
</custom-element>
</template>
</html-demo-element>
<html-demo-element legend="7. initial slice value from SLICE element, button ignored till change on click."
description="synthetic SLICE element serves as initial value holder">
<template>
<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>
</template>
</html-demo-element>
<html-demo-element legend="8. multiple slices by SLICE element, button ignored till change on click."
description="synthetic SLICE elements serve as initial value holder">
<template>
<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>
</template>
</html-demo-element>
<html-demo-element legend="9. slice in attribute"
description="initial attribute value should be smile as emoji and :) on blur from input it should be updated from value">
<template>
<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>
</template>
</html-demo-element>
<html-demo-element legend="10. multiple slices by same field"
description="same element value sets s1 and s2 slice">
<template>
<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>
</template>
</html-demo-element>
<html-demo-element legend="11. slices and attribute"
description="initial attribute value should be smile as emoji and :) on blur from input it should be updated from value">
<template>
<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>
</template>
</html-demo-element>
<html-demo-element legend="12. checkbox use"
description="The value is empty when unchecked. Otherwise taken either from slice-value or value attribute.">
<p>Check the box to see the value in slice</p>
<template>
<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>
</template>
</html-demo-element>
<html-demo-element legend="13. Radio group"
description="The value propagated into slice from the last checked radiobutton.">
<p>Check the radiobutton to see the value in slice</p>
<template>
<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>
</template>
</html-demo-element>
<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
</body>
</html>