shadow-dom-element
Version:
shadow-dom-element is a declarative custom element/web component to render local and remote template
137 lines (120 loc) • 4.62 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>shadow-dom-element demo</title>
<style>
body{ display: flex; flex-wrap: wrap; align-content: stretch; gap: 1rem; font-family: sans-serif; }
body>*{flex:1; min-width: 32rem;}
</style>
</head>
<body>
<shadow-dom-element code="./demo-header.html" >
<h2 slot="sub-header"> template & slots </h2>
<link slot="page-source" href="https://github.com/sashafirsov/shadow-dom-element/blob/main/demo/index.html" />
</shadow-dom-element>
<html-demo-element legend="Inline slots & template">
<template>
<shadow-dom-element>
<template>
<slot name="slot1"><h5>FAIL heading 5 🙄</h5></slot>
<slot name="slot2">
<button>FAIL action 🤥</button>
</slot>
<slot name="slot3"><p> slot 3 not overridden </p></slot>
default slot
</template>
<a slot="slot2" href="#">link 😃</a>
<h3 slot="slot1" id="heading">heading 3 😌</h3>
</shadow-dom-element>
</template>
</html-demo-element>
<html-demo-element legend="in-page slots & template">
<template>
<template id="in-page-template">
<slot name="slot1"><h5>FAIL heading 5🙄</h5></slot>
<slot name="slot2">
<button>FAIL action 🤥</button>
</slot>
<slot name="slot3"><p> slot 3 not overridden </p></slot>
default slot
</template>
<template id="in-page-slots">
<a slot="slot2" href="#">link 😃</a>
<h3 slot="slot1" >heading 3 😌</h3>
</template>
<shadow-dom-element srcset="in-page-slots" for="in-page-template"></shadow-dom-element>
</template>
</html-demo-element>
<html-demo-element legend="Slots & template from URL">
<template>
<shadow-dom-element src="slots.html" code="template.html"></shadow-dom-element>
</template>
</html-demo-element>
<html-demo-element legend="Default slot">
<template>
<shadow-dom-element>
<template>
<slot><button>FAIL action</button></slot>
</template>
<button slot="">action</button>
</shadow-dom-element> </template>
</html-demo-element>
<html-demo-element legend="slots for attributes">
<template>
<shadow-dom-element>
<template>
<a href="#" title="FAIL title ovverriding 🙄">
<slot name="link-url" attribute="href" hidden ></slot>
<slot name="link-title" attribute="title" hidden ></slot>
link SRC and TITLE controlled by slots
</a>
<hr/>
<img alt="image without url" id="image-1" />
<slot name="image-alt" attribute="alt" for="image-1" hidden></slot>
<hr/> Doc image URL by slot:<br/>
<img id="image-2" alt="source from slot" />
<slot name="image-src" attribute="src" for="image-2" hidden></slot>
</template>
<a slot="link-url" href="./" ></a>
<i slot="link-title"> link title 😃 </i>
<i slot="image-alt" > img alt 😌 </i>
<link slot="image-src" href="doc.png" />
</shadow-dom-element>
</template>
</html-demo-element>
<html-demo-element legend="slots.html" src="slots.html"></html-demo-element>
<html-demo-element legend="template.html" src="template.html"></html-demo-element>
<script type="module" src="https://unpkg.com/html-demo-element@1.0/html-demo-element.js"></script>
<script type="module" src="../shadow-dom-element.js"></script>
<html-demo-element legend="json rendering">
<json-sample src="doc.json">
<template>
<fieldset>
<legend>name: <slot name="name"></slot></legend>
<slot name="title"></slot><br/>
<slot name="portrait"></slot>
</fieldset>
</template>
</json-sample>
</html-demo-element>
<html-demo-element legend="load json by overriding fetch()">
<script type="module">
import ShadowDomElement from "../shadow-dom-element.js";
class JsonSample extends ShadowDomElement
{
async fetch( url ){
const obj = await ( await fetch(url) ).json();
return Object.keys( obj )
.map( key =>
key === 'portrait'
? `<img alt="${key}" slot="${key}" src="${ obj[key] }"/>`
: `<span slot="${key}">${ obj[key] }</span>` )
.join('\n')
}
}
customElements.define('json-sample', JsonSample);
</script>
</html-demo-element>
</body>
</html>