代码拉取完成，页面将自动刷新
PostHTML plugin for Server Side Web Component Render.
Must mention that Web Components supported by posthtml-web-component don't completely follow the Web Components draft.
A typical posthtml web component looks as following:
<!-- clock.html -->
<style>
.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;
}
</style>
<template>
<div class="clock">
<div class="hour">HH</div>
<div class="minute">MM</div>
<div class="second">SS</div>
</div>
</template>
<script>
(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);
})
})()
</script>
This is a runnable component itself. Consider there is a index.html:
<!-- index.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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="import" href="./clock.html">
<style>
.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;
}
</style>
</head>
<body>
<div class="clock">
<div class="hour">HH</div>
<div class="minute">MM</div>
<div class="second">SS</div>
</div>
<div class="clock">
<div class="hour">HH</div>
<div class="minute">MM</div>
<div class="second">SS</div>
</div>
<script>
(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);
})
})()
</script>
</body>
</html>
Work fine!
We have two types of LinkImport, local and remote.
<!-- local LinkImport -->
<link rel="import" href="hello-world.html">
<!-- remote LinkImport -->
<link rel="import" href="http://example.com/hello-world.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.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
