https://github.com/posthtml/posthtml-web-component
Server Side Web Component Render.
https://github.com/posthtml/posthtml-web-component
Last synced: 10 months ago
JSON representation
Server Side Web Component Render.
- Host: GitHub
- URL: https://github.com/posthtml/posthtml-web-component
- Owner: posthtml
- License: mit
- Created: 2015-11-20T10:38:07.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2019-09-11T07:02:06.000Z (over 6 years ago)
- Last Synced: 2024-10-29T21:06:08.752Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 40 KB
- Stars: 35
- Watchers: 8
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# posthtml-web-component
[](https://badge.fury.io/js/posthtml-web-component)
[](https://travis-ci.org/posthtml/posthtml-web-component.svg?branch=master)
[](https://coveralls.io/github/posthtml/posthtml-web-component)
[PostHTML](https://github.com/posthtml/posthtml) plugin for Server Side Web Component Render.
## Feature
- Base Web Component Server Side Rending
- Component as a Sevice
## Advantage
## Explanation
### Web Component
Must mention that `Web Components` supported by `posthtml-web-component` don't completely follow the [Web Components](http://www.w3.org/TR/components-intro/) draft.
A typical posthtml web component looks as following:
```html
.clock {
display: inline-flex;
justify-content: space-around;
background: white;
font-size: 8rem;
box-shadow: 2px 2px 4px -1px grey;
border: 1px solid green;
font-family: Helvetica, sans-serif;
width: 100%;
}
.clock .hour,
.clock .minute,
.clock .second {
color: orange;
padding: 1.5rem;
text-shadow: 0px 2px black;
}
HH
MM
SS
(function() {
Array.prototype.forEach.call(document.querySelectorAll('.clock'), function (clock) {
var hourElement = clock.querySelector('.hour'),
minuteElement = clock.querySelector('.minute'),
secondElement = clock.querySelector('.second');
window.setInterval(function() {
var date = new Date();
hourElement.innerText = date.getHours();
minuteElement.innerText = date.getMinutes();
secondElement.innerText = date.getSeconds();
}, 1000);
})
})()
```
This is a runnable component itself. Consider there is a `index.html`:
```html
```
After `posthtml-web-component`'s transforming:
```html
.clock {
display: inline-flex;
justify-content: space-around;
background: white;
font-size: 8rem;
box-shadow: 2px 2px 4px -1px grey;
border: 1px solid green;
font-family: Helvetica, sans-serif;
width: 100%;
}
.clock .hour,
.clock .minute,
.clock .second {
color: orange;
padding: 1.5rem;
text-shadow: 0px 2px black;
}
HH
MM
SS
HH
MM
SS
(function() {
Array.prototype.forEach.call(document.querySelectorAll('.clock'), function (clock) {
var hourElement = clock.querySelector('.hour'),
minuteElement = clock.querySelector('.minute'),
secondElement = clock.querySelector('.second');
window.setInterval(function() {
var date = new Date();
hourElement.innerText = date.getHours();
minuteElement.innerText = date.getMinutes();
secondElement.innerText = date.getSeconds();
}, 1000);
})
})()
```
Work fine!
### LinkImport
We have two types of `LinkImport`, local and remote.
```html
```
The difference of these two types is that remote `LinkImport` could call a remote service, this is to say remote `LinkImport` could be dynamic.