shadow-dom-element
Version:
shadow-dom-element is a declarative custom element/web component to render local and remote template
40 lines (38 loc) • 2.11 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<style>body{ font-family: sans-serif; }</style>
<title>shadow-dom-element</title>
<script type="module" src="shadow-dom-element.js"></script>
</head>
<body>
<shadow-dom-element code="./demo/demo-header.html" >
<link slot="page-source" href="https://github.com/sashafirsov/shadow-dom-element/blob/main/index.html" />
</shadow-dom-element>
<a href="demo/index.html">Tech Demo</a><hr/>
<a href="demo/ananke/content/en/index.html">Ananke site template demo</a>
<ul>
<li><a href="demo/ananke/content/en/index.html">index.html</a> - home page with <var>summary-with-image</var>
inline template, <br/>
external template use by <code>code="<a href="https://github.com/sashafirsov/shadow-dom-element/blob/main/demo/ananke/content/en/templates/header.html"
>./templates/header.html</a>"</code>
</li>
<li>
<a href="demo/ananke/content/en/chapter-6.html">chapter-6.html</a>,
<a href="demo/ananke/content/en/chapter-5.html">chapter-5.html</a>,
<a href="demo/ananke/content/en/chapter-4.html">chapter-4.html</a>
- pages with <a href="https://github.com/sashafirsov/shadow-dom-element/blob/main/demo/ananke/content/en/templates/chapter-body.html"
>chapter-body</a> external template, <br/>
external header & footer templates
</li>
<li>
content is rendered by templates from HTML tags in same format by data sources:
<a href="https://github.com/sashafirsov/shadow-dom-element/blob/main/demo/ananke/content/en/post/home.html">demo/ananke/content/en/post/home.html</a>,
<a href="https://github.com/sashafirsov/shadow-dom-element/blob/main/demo/ananke/content/en/post/chapter-4/index.html">chapter-4</a>,
<a href="https://github.com/sashafirsov/shadow-dom-element/blob/main/demo/ananke/content/en/post/chapter-5/index.html">chapter-5</a>,
<a href="https://github.com/sashafirsov/shadow-dom-element/blob/main/demo/ananke/content/en/post/chapter-6/index.html">chapter-6</a>,
</li>
</ul>
</body>
</html>