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

light-dom-element web component to render local and remote template

<header>
    <style>
        body{ font-family: sans-serif; }
    </style>
    <h1>&lt;light-dom-element&gt; demo</h1>
    <p> Developer's documentation in <a href="https://github.com/sashafirsov/light-dom-element">Git repo</a>
        |   This page
        <a href="https://github.com/sashafirsov/light-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 twin web component <a href="https://github.com/sashafirsov/shadow-dom-element">shadow-dom-element</a>
        , a same html template rendering use <b>with shadow DOM</b>
    </p>
    <p> While <code>light-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/dist/slots.html">CssChain slots demo</a>.
        CssChain is a modern DOM manipulation library with support of Light and Shadow DOM.
    </p>
    <p>Most comprehensive and tricky use of HTML templates reside in Chromium sources, here is a side by side
        <a href="https://unpkg.com/css-chain-test@1.1.7/dist/slots-light-vs-shadow.html">visual presentation</a>
        for light and shadow DOM .
    </p>
</header>