Installations

npm install posthtml-web-component

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

4.2.1

NPM Version

2.14.7 Pull Requests

Open

0

Total

7

Closed

0

Merged

7

Issues

Open

2

Total

4

Closed

2

Releases

Unable to fetch releases

Languages

3

JavaScript

HTML

CSS

JavaScript (75.71%)

HTML (22.76%)

CSS (1.53%)

Developer

island205

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

35 Stars

42 Commits

7 Forks

7 Watchers

1 Branches

16 Contributors

Updated on Mar 09, 2024

Maintainers

1

View All 16 Contributors

Package Meta Information

Latest Version

0.1.0

Package Id

posthtml-web-component@0.1.0

Size

8.41 kB

NPM Version

2.14.7

Node Version

4.2.1

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

3

debug posthtml request

Dev Dependencies

5

chai coveralls jscoverage mocha mocha-lcov-reporter

posthtml-web-component

PostHTML plugin for Server Side Web Component Render.

Feature

Base Web Component Server Side Rending
Component as Sevice

Advantage

Explanation

Web Component

Must mention that Web Components supported by posthmlt-web-compoent don't completely follow the Web Components draft.

A typical posthtml web compnent look as following:

1<!-- clock.html -->
2<style>
3  .clock {
4    display: inline-flex;
5    justify-content: space-around;
6    background: white;
7    font-size: 8rem;
8    box-shadow: 2px 2px 4px -1px grey;
9    border: 1px solid green;
10    font-family: Helvetica, sans-serif;
11    width: 100%;
12  }
13  .clock .hour,
14  .clock .minute,
15  .clock .second {
16    color: orange;
17    padding: 1.5rem;
18    text-shadow: 0px 2px black;
19  }
20</style>
21<div class="clock">
22  <div class="hour">HH</div>
23  <div class="minute">MM</div>
24  <div class="second">SS</div>
25</div>
26<script>
27(function() {
28  Array.prototype.forEach.call(document.querySelectorAll('.clock'), function (clock) {
29    var hourElement = clock.querySelector('.hour'),
30      minuteElement = clock.querySelector('.minute'),
31      secondElement = clock.querySelector('.second');
32
33    window.setInterval(function() {
34      var date = new Date();
35      hourElement.innerText = date.getHours();
36      minuteElement.innerText = date.getMinutes();
37      secondElement.innerText = date.getSeconds();
38    }, 1000);
39  })
40})()
41</script>

This is a runable component itself. Consider There is a index.html:

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="import" href="./clock.html">
  </head>
  <body>
    <clock></clock>
    <clock></clock>
  </body>
</html>

After posthtml-web-component's transforming:

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title></title>
6    <link rel="import" href="./clock.html">
7    <style>
8      .clock {
9        display: inline-flex;
10        justify-content: space-around;
11        background: white;
12        font-size: 8rem;
13        box-shadow: 2px 2px 4px -1px grey;
14        border: 1px solid green;
15        font-family: Helvetica, sans-serif;
16        width: 100%;
17      }
18      .clock .hour,
19      .clock .minute,
20      .clock .second {
21        color: orange;
22        padding: 1.5rem;
23        text-shadow: 0px 2px black;
24      }
25    </style>
26  </head>
27  <body>
28    <div class="clock">
29      <div class="hour">HH</div>
30      <div class="minute">MM</div>
31      <div class="second">SS</div>
32    </div>
33    <div class="clock">
34      <div class="hour">HH</div>
35      <div class="minute">MM</div>
36      <div class="second">SS</div>
37    </div>
38    <script>
39    (function() {
40      Array.prototype.forEach.call(document.querySelectorAll('.clock'), function (clock) {
41        var hourElement = clock.querySelector('.hour'),
42          minuteElement = clock.querySelector('.minute'),
43          secondElement = clock.querySelector('.second');
44
45        window.setInterval(function() {
46          var date = new Date();
47          hourElement.innerText = date.getHours();
48          minuteElement.innerText = date.getMinutes();
49          secondElement.innerText = date.getSeconds();
50        }, 1000);
51      })
52    })()
53    </script>
54  </body>
55</html>

Work fine!

LinkImport

We have two type LinkImport, local and remote.

1<!-- local LinkImport -->
2<link rel="import" href="hello-world.html">
3
4<!-- remote LinkImport -->
5<link rel="import" href="http://example.com/hello-world.html">

The difference of these two type is remote LinkImport could call an remote service, this is to say remote LinkImport could be dynamic.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

3.3

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More