shadow-dom-element/demo/demo-header.html

shadow-dom-element is a declarative custom element/web component to render local and remote template

<header>
    <h1>&lt;shadow-dom-element&gt; demo</h1>
    <slot name="sub-header"><b>demo-header.html</b> alone is used as template </slot>
    <p> Developer's documentation in <a href="https://github.com/sashafirsov/shadow-dom-element">Git repo</a>
        |   This page
        <a href="https://github.com/sashafirsov/shadow-dom-element/blob/main/demo/index.html">
            <slot name="page-source" attribute="href"></slot>
            source
        </a>
    </p>
    <b>
        <a href="index.html"> template &amp; slots </a> &bull;
        <a href="dce.html"> Declarative Custom Element </a> &bull;
        <a href="demo-header.html"> demo-header </a> &bull;
        <a href="ananke/content/en/index.html"> Ananke static site demo </a>
    </b>
    <p> Check out <a href="https://github.com/sashafirsov/light-dom-element">light-dom-element</a>
        same html template rendering use <b>without shadow DOM</b>
        for SSR and CMS </p>
    <p> While <code>shadow-dom-element</code> can render JSON as in sample bellow,
        the thorough handling of loading-rendering lifecycle is done by
        <a href="https://github.com/sashafirsov/slotted-element">slotted-element</a>
    </p>
    <p>More extended set of template with slots use is covered by
        <a href="https://unpkg.com/css-chain-test@1.1.2/dist/slots.html">CssChain slots demo</a>.
        CssChain is a modern DOM manipulation library with support of Light and Shadow DOM.
    </p>
</header>