@epa-wg/custom-element
Version:
Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating
170 lines (148 loc) • 5.91 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>CSS scoping - 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";
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;
}
caption {
padding: 1rem;
font-weight: bolder;
font-family: sans-serif;
}
code {
text-align: right;
min-width: 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. STYLE tag css rules are scoped within element "
description="Green button borders should not be applied to external button ">
<template>
<custom-element>
<template><!-- template needed to avoid styles leaking into global HTML -->
<style>
button{ border: 0.2rem dashed green; }
</style>
<button>Green dashed border</button>
</template>
</custom-element>
<button>Default border</button>
</template>
</html-demo-element>
<html-demo-element legend="2. DCE with tag "
description="Blue borders only within 2 DCE instances">
<template>
<custom-element tag="dce-1">
<template><!-- template needed to avoid styles leaking into global HTML -->
<style>
button{ border: 0.2rem dotted blue; }
</style>
<button><slot>Blue borders</slot></button>
</template>
</custom-element>
<button>Default border</button>
<dce-1>1st</dce-1>
<dce-1>2nd</dce-1>
</template>
</html-demo-element>
<html-demo-element legend="3. Override style in DCE payload "
description="Red borders only for last DCE instance">
<template>
<custom-element tag="dce-2">
<template><!-- template needed to avoid styles leaking into global HTML -->
<style>
button{ border: 0.2rem dashed blue; }
</style>
<button><slot>Blue borders</slot></button>
</template>
</custom-element>
<button>Default border</button>
<dce-2>1st</dce-2>
<dce-2>
<template> <!-- template needed to avoid styles leaking into global HTML -->
<style>button{border-color:red;}</style>
Red border
<b>2</b>
3
<b>4</b>
</template>
</dce-2>
</template>
</html-demo-element>
<html-demo-element legend="4. simple internal override "
description="green label with blue text button ">
<template>
<custom-element>
<template>
<style>
color:green;
b{ color: blue;}
input:checked+b{ color: darkblue; text-shadow: 0 0 4px springgreen;}
</style>
<label>
green
<input type="checkbox" value="Glowing Blue" checked/><b>blue</b>
</label>
</template>
</custom-element>
</template>
</html-demo-element>
<html-demo-element legend="5. External template( inline lib )"
description="green label with blue text button ">
<template>
<template id="template-5">
<style>
color:green;
i{ color: blue;}
</style>
<p>
green
<i>blue</i>
</p>
</template>
<custom-element src="#template-5"></custom-element>
</template>
</html-demo-element>
<html-demo-element legend="6. External template( ext lib )"
description="Grid with 8 hex shaped buttons with text and icon ">
<template>
<a href="hex-grid-dce.html">hex-grid-dce.html</a>
<custom-element src="hex-grid-dce.html#hex-grid-template">
<template>
<style>nav{--hex-grid-size: 5rem; margin-left:2rem; }</style>
<img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
<img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
<img src="https://www.svgrepo.com/show/508923/jquery.svg" alt="jQuery"/>
<img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
<img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
<img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>
<img src="https://redux.js.org/img/redux.svg" alt="Redux"/>
</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>