shadow-dom-element

is covering the typical UI tasks: populate html slots into template using Shadow DOM. Slots content and template could be local in the page or pointed via URL.

git GitHub | Try in Sandbox | Live Demo: shadow-dom-element | tests project

<script type="module" src="https://unpkg.com/shadow-dom-element@0.0/shadow-dom-element.js"></script>
<shadow-dom-element tag="my-component" src="https://unpkg.com/light-dom-element-test@0.0/test/template.html"></shadow-dom-element>
<my-component>
    <h3 slot="slot1">heading 😌</h3>
</my-component>

Where to use

shadow-dom-element is simplest web component to render HTML template and slot. Fully functional template and declarative events handling is done by another project: @epa-wg/custom-element

It is meant for displaying the static content in the page or available during page load via URL.

You do not need a static site generator as most of "components" could be expressed via template in own file. There is a live sample of shadow-dom-element based templates for Ananke site generator. While it is not a good example of shadow dom css styling, it gives enough for templates embedding and use of such for building the static web site. You could play with this responsive template in Sandbox.

File the issue if need a site sample based on html templates or have your own to be shared.

Use

install

npm i -P shadow-dom-element

or use from CDN

    <script type="module" scr="https://unpkg.com/shadow-dom-element@0.0/shadow-dom-element.js"></script>

The size of shadow-dom-element.js is 1.6Kb, compiled to 1Kb.

API

fetch implemented via fetch() api, can be overridden with any type.

promise resolved when template and slots loaded and rendered
slotsInit() initiates template and slots reading and rendering, returns Promise<this>
fetch( url ) override to load and process URL before returning a HTML string with data within slots. Handy to use the JSON or XML as data source. Note, there is no error handling, you have to cover that case by template and error slots. For that you could find slotted-element handy as it is designed for loading life cycle.
applyTemplate( templateNode ) applies template to slots in sub-dom of this element as Shadow DOM. Internal method to be overridden by light-dom-element to render by Light DOM.

Attributes

all attributes reflected as component properties

tag tag name of declarative custom element
srcset id of container with slots
src url for html with slots
for id for html template
code url for html template

From slot to attribute

<slot name=xxx attribute=abc for=id-in-shadow-dom> is a special case of slot use within template: it would set the abc attribute of parent node to value taken either from href, src, or innerText of passed element with given name. It is needed to pass the attribute via slots. For example, link or image URL. It could be used to pass attribute to internal shadow-dom-element as within summary-with-image template for image URL.

slot attribute=abc defines attribute which would be populated from slot href, src, or innerText

slot for=in-shadow-id for slot with attribute defines the element where attribute would be applied. When omitted, the attribute of container element where slot is located in template would be set:

    <shadow-dom-element>
        <template>
            <img  id="image-2" alt="source from slot" />
            <slot name="image-src" attribute="src" for="image-2" hidden></slot>
        </template>
        <link slot="image-src" href="https://github.com/sashafirsov/shadow-dom-element/blob/main/doc.png" />
    </shadow-dom-element>

test and demo

reside in separate repository https://github.com/sashafirsov/ligh-dom-element-test to avoid unnecessary dependency in source repo and npm.

Minimal functionality local demo is available in demo/ which could be run by

npm start

Typescript

import ShadowDomElement from 'shadow-dom-element' code has typings along with JSDoc enabled.

dependencies

none

sashafirsov / shadow-dom-element

readme