shadow-dom-element

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.

• fetch via fetch() api
• promise property resolved when template is applied.

GitHub | Demo: shadow-dom-element | tests project

Where to use

shadow-dom-element is simplest web component to render HTML template and slot.

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.

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

• promise resolved when template and slots loaded and rendered
• slotsInit() initiates template and slots reading and rendering, returns Promise<this>
• fetch( url ) to override id want 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

• srcset id of container with slots
• src url for html with slots
• for id for html template
• code url for html template

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 SlottedElement from 'shadow-dom-element' code has typings along with JSDoc enabled.

dependencies

none