@epa-wg/custom-element-test
Version:
binary distribution, test, and storybook project for custom-element
125 lines (107 loc) • 3.95 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>DOM merge - 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="../input-text.js"></script>
<script type="module" src="../custom-element.js"></script>
<style>
@import "./demo.css";
button {
display: inline-flex;
flex-direction: column;
align-items: center;
flex: auto;
box-shadow: inset silver 0 0 1rem;
min-width: 12rem;
padding: 1rem;
color: coral;
text-shadow: 1px 1px silver;
font-weight: bolder;
}
button img {
max-height: 10vw;
min-height: 4rem;
}
table {
min-width: 16rem;
}
td {
border-bottom: 1px solid silver;
}
tfoot td {
border-bottom: none;
}
td, th {
text-align: right;
}
caption {
padding: 1rem;
font-weight: bolder;
font-family: sans-serif;
}
code {
text-align: right;
min-width: 3rem;
}
svg {
max-height: 3rem;
}
</style>
</head>
<body>
<nav>
<a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
<h3>DOM merge. DCE dynamic update with focus preservation.</h3>
</nav>
<html-demo-element legend="1. Word count in textarea"
description="Counter update happens on change event(focus change).
The update should not interfere with the input">
<template>
<custom-element>
<form>
<label>
<textarea slice="text-container" >Hello world!</textarea>
<span> Word count:
{string-length(//slice/text-container/text())}
</span>
</label>
</form>
</custom-element>
</template>
</html-demo-element>
<hr/>
<html-demo-element legend="2. Word count in HTML input field"
description="Counter update happens on keyup event.
The update should not interfere with the input">
<template>
<custom-element>
<form>
<label>
<input type="text"
value="{//txt ?? 'Type time update'}"
slice="txt"
slice-event="init input"/>
<span> Character count:
<b> {string-length(//slice/txt)} </b>
</span>
<span> Word count:
<b> {string-length(normalize-space(//slice/txt)) -
string-length(translate(normalize-space(//slice/txt), ' ', '')) + 1} </b>
<!-- The expression first normalizes the string by removing leading and trailing whitespace and
collapsing internal whitespace into a single space. It then subtracts the length of the string
with all spaces removed from the length of the original string,
and adds 1 to account for the last word.
-->
</span>
</label>
<p><b>txt</b> slice:</p> <blockquote> {//slice/txt} </blockquote>
</form>
</custom-element>
</template>
</html-demo-element>
<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
</body>
</html>