Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sashafirsov/shadow-dom-element
shadow-dom-element web component to render local and remote template
https://github.com/sashafirsov/shadow-dom-element
Last synced: 16 days ago
JSON representation
shadow-dom-element web component to render local and remote template
- Host: GitHub
- URL: https://github.com/sashafirsov/shadow-dom-element
- Owner: sashafirsov
- License: apache-2.0
- Created: 2022-04-19T03:26:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-08T18:19:08.000Z (12 months ago)
- Last Synced: 2024-11-29T11:16:18.312Z (24 days ago)
- Language: JavaScript
- Size: 410 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# shadow-dom-element
is covering the typical UI tasks:
populate html slots into template using
[Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
Slots content and template could be local in the page or pointed via URL.
[ GitHub](https://github.com/sashafirsov/shadow-dom-element)
| Try in [Sandbox][sandbox-url]
| Live Demo: [shadow-dom-element](https://unpkg.com/[email protected]/index.html)
| [tests project](https://github.com/sashafirsov/light-dom-element-test)
[![NPM version][npm-image]][npm-url]
[](https://www.webcomponents.org/element/shadow-dom-element)
[![coverage][coverage-image]][coverage-url]
```html
heading 😌
```
## 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](https://github.com/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](https://www.cloudflare.com/learning/performance/static-site-generator/)
as most of "components" could be expressed via template in own file.
[There is a live sample](https://unpkg.com/[email protected]/demo/ananke/content/en/index.html)
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][sandbox-url].
[File the issue](https://github.com/sashafirsov/shadow-dom-element/issues)
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
```js
```
The size of [shadow-dom-element.js](https://unpkg.com/[email protected]/shadow-dom-element.js)
is 1.6Kb, [compiled](https://unpkg.com/[email protected]/dist/src/shadow-dom-element.js) to 1Kb.
## API
fetch implemented via [fetch() api](https://developer.mozilla.org/en-US/docs/Web/API/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`
* `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](https://github.com/sashafirsov/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](https://github.com/sashafirsov/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
`` 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](https://github.com/sashafirsov/shadow-dom-element/blob/324d7de33464368c312e0bc6a9d8becc9b4dabf3/demo/ananke/content/en/index.html#L42)
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:
```html
![source from slot]()
```
# 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/](demo/index.html) which could be run by
```bash
npm start
```
# Typescript
`import ShadowDomElement from 'shadow-dom-element'` code has [typings](shadow-dom-element.d.ts) along with JSDoc enabled.
# dependencies
none
[npm-image]: https://img.shields.io/npm/v/shadow-dom-element.svg
[npm-url]: https://npmjs.org/package/shadow-dom-element
[coverage-image]: https://unpkg.com/[email protected]/coverage/coverage.svg
[coverage-url]: https://unpkg.com/[email protected]/coverage/lcov-report/index.html
[sandbox-url]: https://stackblitz.com/github/sashafirsov/shadow-dom-element