Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ebidel/declarative-web-components
Author web components, declaratively
https://github.com/ebidel/declarative-web-components
Last synced: 2 months ago
JSON representation
Author web components, declaratively
- Host: GitHub
- URL: https://github.com/ebidel/declarative-web-components
- Owner: ebidel
- License: apache-2.0
- Created: 2017-05-12T11:41:44.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-07-16T02:47:46.000Z (over 7 years ago)
- Last Synced: 2024-11-01T11:34:32.184Z (2 months ago)
- Language: JavaScript
- Size: 9.77 KB
- Stars: 35
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - declarative-web-components - Author web components, declaratively (JavaScript)
README
# Author web components, declaratively
Custom elements and shadow DOM should be declarative. Unfortunately, both APIs
are JavaScript-based.
This repo shows how to define two custom elements, `` and `` which can be used to declaratively author a web component. Custom elements should be declarative
See [demo](demo/index.html) for full examples and live demos.
## Examples
**Example** - `` tag
```
Eric's
declarative shadow dom!
```
What this does:
- Creates Shadow DOM from a child `` and attaches the shadow root to the parent element. In this example, `
`.
**Example** - `` tag:
```html
content appended by element's author (in light dom)
```
What this does:
- Element does not use Shadow DOM
- Element does not register itself. The page should called `customElements.define('basic-element')`.
**Example** - `` with styles
```html
/* CSS selectors are prefixed/scoped b/c we're not using shadow dom. */
basic-element h2 {
color: blue
}
basic-element: some content should be blue
```
What this does:
- Element does not use Shadow DOM
- Element does not register itself. The page should called `customElements.define('basic-element-styles')`.
- Element defines styles for its light dom.
**Example** - `` that uses shadow dom and registers itself
```html
:host {
display: block;
color: red;
}
::slotted(span) {
color: blue;
}
click me (in shadow dom)
(class extends HTMLElement {
constructor() {
super();
this.addEventListener('click', this.sayHi);
}
sayHi() {
alert('Hi!');
}
})
```
What this does:
- Element uses Shadow DOM
- Element auto-registers itself when defining a script in ``.