@epa-wg/custom-element
Version:
Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating
189 lines (172 loc) • 8.7 kB
HTML
<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>custom-element Declarative Custom Element implementation demo</title>
<link rel="icon" href="demo/wc-square.svg" />
<script type="importmap">
{
"imports": {
"@epa-wg/custom-element/": "./",
"@epa-wg/custom-element-dist/": "./"
}
}
</script>
<script type="module" src="./http-request.js"></script>
<script type="module" src="./location-element.js"></script>
<script type="module" src="./custom-element.js"></script>
<style>
@import "demo/demo.css";
</style>
</head>
<body xmlns:xhtml="http://www.w3.org/1999/xhtml">
<nav>
<h3><code>custom-element</code> demo</h3>
<div><a href="https://github.com/EPA-WG/custom-element"
><img src="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg" alt="icon">GIT</a>
| <a href="https://github.com/EPA-WG/custom-element/blob/main/README.md">README</a>
| <a href="https://stackblitz.com/github/EPA-WG/custom-element?file=index.html">Sandbox</a>
| <a href="https://chrome.google.com/webstore/detail/epa-wgcustom-element/hiofgpmmkdembdogjpagmbbbmefefhbl"
>Chrome devtools plugin</a>
| <custom-element src="@epa-wg/custom-element/demo/npm-versions.html#npm-version-to-url"
slice="selected" package-name="@epa-wg/custom-element">
<i slot="label">version:</i>
</custom-element>
</div>
<p>
This <em>Declarative Custom Element</em> allows to define<br/>
custom HTML tag with template filled from slots, attributes, dataset. </p>
<p>The template is fully loaded with variables, conditions, loops, etc. <br/>
The data query is powered by XPath. </p>
<p>Try in <a href="https://stackblitz.com/github/EPA-WG/custom-element?file=index.html" >Sandbox</a> </p>
<section>
<h4>Features demo</h4>
<a href="./demo/local-storage.html" >local-storage </a> |
<a href="./demo/http-request.html" >http-request </a> |
<a href="./demo/location-element.html" >location-element </a> |
<a href="./demo/set-url.html" >set-url </a> |
<a href="./demo/external-template.html" >external template </a> |
<a href="./demo/module-url.html" >importmap </a> <br/>
<a href="./demo/hex-grid.html" >hex grid lib </a> |
<a href="./demo/scoped-css.html" >scoped CSS </a> |
<a href="./demo/attributes.html" >attributes </a> |
<a href="./demo/data-slices.html" >data slices/events </a> |
<a href="./demo/form.html" >Form validation </a> |
<a href="./demo/dom-merge.html" >DOM merge on dynamic update </a><br/>
<a href="./demo/npm-versions-demo.html">npm version </a>
</section>
</nav>
<html-demo-element legend="1. simple payload"
description="payload is ignored as in DCE definition there is no default slot">
<template>
<custom-element tag="dce-link" hidden>
<a href="#">link 😃</a>
</custom-element>
<dce-link><i>🍋</i></dce-link>
</template>
</html-demo-element>
<html-demo-element legend="2. payload with slot definition and slot value"
description="slots are filled as in template+shadow root">
<template>
<custom-element tag="dce-1-slot" hidden>
🐇❤️<slot name="slot1"> 🥦</slot>
</custom-element>
<dce-1-slot><i slot="slot1">🥕</i></dce-1-slot>
</template>
</html-demo-element>
<html-demo-element legend="2a. payload with slot definition and slot value"
description="unlike in TEMPLATE, same slot can be used multiple times and within attribute ">
<template>
<custom-element tag="dce-2-slots" hidden>
<slot name="slot2"> 😃</slot> and again:
<slot name="slot2"> 😃</slot>
<xhtml:input placeholder="🐇❤️{//*[@slot='slot2']}"/>
</custom-element>
<dce-2-slots><i slot="slot2">🥕</i></dce-2-slots>
<dce-2-slots></dce-2-slots>
</template>
</html-demo-element>
<html-demo-element legend="2b. named default slot"
description="slot without `name` attribute or with blank value `name=''` use whole payload">
<template>
<custom-element tag="dce-3-slot" hidden>
#1
<slot name=""> 😃</slot>
and
<slot> 😃</slot>
</custom-element>
<dce-3-slot><i slot="">🥕</i></dce-3-slot>
</template>
</html-demo-element>
<html-demo-element legend="2c. named default slot"
description="slot without `name` attribute or with blank value `name=''` use whole payload">
<template>
<custom-element tag="dce-4-slot" hidden>
#2
<slot name=""> 😃</slot>
and
<slot> 😃</slot>
</custom-element>
<dce-4-slot>🥕</dce-4-slot>
</template>
</html-demo-element>
<html-demo-element legend="2d. default slot"
description="slot without `name` attribute use whole payload">
<template>
<custom-element tag="greet-element" hidden>
<slot> Hello </slot> World!
</custom-element>
<greet-element></greet-element>
<greet-element>👋</greet-element>
</template>
</html-demo-element>
<html-demo-element legend="3. 💪 DCE template "
description="Complex case with slots, attributes, dataset, conditional render">
<template>
<custom-element tag="pokemon-tile" hidden id="shared-template">
<template>
<h3> {title} </h3> <!-- title is an attribute in instance
mapped into /*/attributes/title -->
<if test="//smile"> <!-- data-smile DCE instance attribute,
mapped into /*/dataset/smile
used in condition -->
<!-- data-smile DCE instance attribute, used as HTML -->
<div>Smile as: {//smile}</div> <!-- /datadom/dataset/smile -->
</if>
<!-- image would not be visible in sandbox, see live demo -->
<img src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
alt="{title} image"/>
<!-- image-src and title are DCE instance attributes,
mapped into /*/attributes/
used within output attribute via curly brackets -->
<!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
<p><slot name="description"><i>description is not available</i></slot></p>
<for-each select="//*[@pokemon-id]">
<!-- loop over payload elements with `pokemon-id` attribute,
i.e LI elements -->
<button>
<img height="32"
src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
alt="{text()}"/>
<br/>
{text()} <!-- text from LI element in loop -->
</button>
</for-each>
</template>
</custom-element>
<pokemon-tile title="bulbasaur" data-smile="👼" pokemon-id="1" >
<p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
the seed grows in size as the Pokémon does.</p>
<ul>
<li pokemon-id="2">ivysaur</li>
<li pokemon-id="3">venusaur</li>
</ul>
</pokemon-tile>
<pokemon-tile title="ninetales" pokemon-id="38" >
<li pokemon-id="37">vulpix</li>
</pokemon-tile>
</template>
</html-demo-element>
<script type="module" src="https://unpkg.com/html-demo-element@1.0/html-demo-element.js"></script>
</body>
</html>