{"id":24983621,"url":"https://github.com/posthtml/posthtml-web-component","last_synced_at":"2025-04-11T20:51:20.932Z","repository":{"id":57328851,"uuid":"46555880","full_name":"posthtml/posthtml-web-component","owner":"posthtml","description":"Server Side Web Component Render.","archived":false,"fork":false,"pushed_at":"2019-09-11T07:02:06.000Z","size":41,"stargazers_count":35,"open_issues_count":2,"forks_count":7,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-10-29T21:06:08.752Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/posthtml.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-20T10:38:07.000Z","updated_at":"2024-03-09T08:08:32.000Z","dependencies_parsed_at":"2022-09-07T16:32:23.339Z","dependency_job_id":null,"html_url":"https://github.com/posthtml/posthtml-web-component","commit_stats":null,"previous_names":["island205/posthtml-web-component"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-web-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-web-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-web-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-web-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posthtml","download_url":"https://codeload.github.com/posthtml/posthtml-web-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247813006,"owners_count":21000411,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-04T09:19:55.395Z","updated_at":"2025-04-11T20:51:20.908Z","avatar_url":"https://github.com/posthtml.png","language":"JavaScript","readme":"# posthtml-web-component\n\n[](https://badge.fury.io/js/posthtml-web-component)\n[](https://travis-ci.org/posthtml/posthtml-web-component.svg?branch=master)\n[](https://coveralls.io/github/posthtml/posthtml-web-component)\n\n[PostHTML](https://github.com/posthtml/posthtml) plugin for Server Side Web Component Render.\n\n## Feature\n\n- Base Web Component Server Side Rending\n- Component as a Sevice\n\n## Advantage\n\n## Explanation\n\n### Web Component\n\nMust mention that `Web Components` supported by `posthtml-web-component` don't completely follow the [Web Components](http://www.w3.org/TR/components-intro/) draft.\n\nA typical posthtml web component looks as following:\n\n```html\n\u003c!-- clock.html --\u003e\n\u003cstyle\u003e\n .clock {\n display: inline-flex;\n justify-content: space-around;\n background: white;\n font-size: 8rem;\n box-shadow: 2px 2px 4px -1px grey;\n border: 1px solid green;\n font-family: Helvetica, sans-serif;\n width: 100%;\n }\n .clock .hour,\n .clock .minute,\n .clock .second {\n color: orange;\n padding: 1.5rem;\n text-shadow: 0px 2px black;\n }\n\u003c/style\u003e\n\u003ctemplate\u003e \n \u003cdiv class=\"clock\"\u003e\n \u003cdiv class=\"hour\"\u003eHH\u003c/div\u003e\n \u003cdiv class=\"minute\"\u003eMM\u003c/div\u003e\n \u003cdiv class=\"second\"\u003eSS\u003c/div\u003e\n \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n(function() {\n Array.prototype.forEach.call(document.querySelectorAll('.clock'), function (clock) {\n var hourElement = clock.querySelector('.hour'),\n minuteElement = clock.querySelector('.minute'),\n secondElement = clock.querySelector('.second');\n\n window.setInterval(function() {\n var date = new Date();\n hourElement.innerText = date.getHours();\n minuteElement.innerText = date.getMinutes();\n secondElement.innerText = date.getSeconds();\n }, 1000);\n })\n})()\n\u003c/script\u003e\n```\n\nThis is a runnable component itself. Consider there is a `index.html`:\n\n```html\n\u003c!-- index.html --\u003e\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n \u003chead\u003e\n \u003cmeta charset=\"utf-8\"\u003e\n \u003ctitle\u003e\u003c/title\u003e\n \u003clink rel=\"import\" href=\"./clock.html\"\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cclock\u003e\u003c/clock\u003e\n \u003cclock\u003e\u003c/clock\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\nAfter `posthtml-web-component`'s transforming:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n \u003chead\u003e\n \u003cmeta charset=\"utf-8\"\u003e\n \u003ctitle\u003e\u003c/title\u003e\n \u003clink rel=\"import\" href=\"./clock.html\"\u003e\n \u003cstyle\u003e\n .clock {\n display: inline-flex;\n justify-content: space-around;\n background: white;\n font-size: 8rem;\n box-shadow: 2px 2px 4px -1px grey;\n border: 1px solid green;\n font-family: Helvetica, sans-serif;\n width: 100%;\n }\n .clock .hour,\n .clock .minute,\n .clock .second {\n color: orange;\n padding: 1.5rem;\n text-shadow: 0px 2px black;\n }\n \u003c/style\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv class=\"clock\"\u003e\n \u003cdiv class=\"hour\"\u003eHH\u003c/div\u003e\n \u003cdiv class=\"minute\"\u003eMM\u003c/div\u003e\n \u003cdiv class=\"second\"\u003eSS\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"clock\"\u003e\n \u003cdiv class=\"hour\"\u003eHH\u003c/div\u003e\n \u003cdiv class=\"minute\"\u003eMM\u003c/div\u003e\n \u003cdiv class=\"second\"\u003eSS\u003c/div\u003e\n \u003c/div\u003e\n \u003cscript\u003e\n (function() {\n Array.prototype.forEach.call(document.querySelectorAll('.clock'), function (clock) {\n var hourElement = clock.querySelector('.hour'),\n minuteElement = clock.querySelector('.minute'),\n secondElement = clock.querySelector('.second');\n\n window.setInterval(function() {\n var date = new Date();\n hourElement.innerText = date.getHours();\n minuteElement.innerText = date.getMinutes();\n secondElement.innerText = date.getSeconds();\n }, 1000);\n })\n })()\n \u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\nWork fine!\n\n### LinkImport\n\nWe have two types of `LinkImport`, local and remote.\n\n```html\n\u003c!-- local LinkImport --\u003e\n\u003clink rel=\"import\" href=\"hello-world.html\"\u003e\n\n\u003c!-- remote LinkImport --\u003e\n\u003clink rel=\"import\" href=\"http://example.com/hello-world.html\"\u003e\n```\n\nThe difference of these two types is that remote `LinkImport` could call a remote service, this is to say remote `LinkImport` could be dynamic.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposthtml%2Fposthtml-web-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposthtml%2Fposthtml-web-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposthtml%2Fposthtml-web-component/lists"}