{"id":14990114,"url":"https://github.com/jgarber623/remote-template","last_synced_at":"2025-03-21T23:25:32.852Z","repository":{"id":227855559,"uuid":"772055721","full_name":"jgarber623/remote-template","owner":"jgarber623","description":"A dependency-free Web Component that fetches a URL and appends the response to a \u003ctemplate\u003e.","archived":false,"fork":false,"pushed_at":"2025-01-03T01:42:08.000Z","size":15,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-27T05:54:46.353Z","etag":null,"topics":["custom-elements","customelements","fetch-api","html-template","web-components","webcomponents"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@jgarber/remote-template","language":"HTML","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/jgarber623.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-14T13:01:15.000Z","updated_at":"2025-01-03T01:42:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"1b49fc51-e0de-4e3e-a259-1c75f8734859","html_url":"https://github.com/jgarber623/remote-template","commit_stats":{"total_commits":3,"total_committers":1,"mean_commits":3.0,"dds":0.0,"last_synced_commit":"145394bcb620aefc3450c59e17d5b95b379a22fa"},"previous_names":["jgarber623/remote-template"],"tags_count":1,"template":false,"template_full_name":"jgarber623/web-component-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgarber623%2Fremote-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgarber623%2Fremote-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgarber623%2Fremote-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgarber623%2Fremote-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jgarber623","download_url":"https://codeload.github.com/jgarber623/remote-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244882143,"owners_count":20525807,"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":["custom-elements","customelements","fetch-api","html-template","web-components","webcomponents"],"created_at":"2024-09-24T14:19:28.472Z","updated_at":"2025-03-21T23:25:32.830Z","avatar_url":"https://github.com/jgarber623.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `\u003cremote-template\u003e` Web Component\n\n**A dependency-free [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components) that fetches a URL and appends the response to a [`\u003ctemplate\u003e`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).**\n\n[![npm](https://img.shields.io/npm/v/@jgarber/remote-template.svg?logo=npm\u0026style=for-the-badge)](https://www.npmjs.com/package/@jgarber/remote-template)\n[![Downloads](https://img.shields.io/npm/dt/@jgarber/remote-template.svg?logo=npm\u0026style=for-the-badge)](https://www.npmjs.com/package/@jgarber/remote-template)\n[![Build](https://img.shields.io/github/actions/workflow/status/jgarber623/remote-template/ci.yml?branch=main\u0026logo=github\u0026style=for-the-badge)](https://github.com/jgarber623/remote-template/actions/workflows/ci.yml)\n\n🐶 🧩 **[See `\u003cremote-template\u003e` in action!](https://jgarber623.github.io/remote-template/example)**\n\n## Getting `\u003cremote-template\u003e`\n\nYou've got several options for adding this Web Component to your project:\n\n- [Download a release](https://github.com/jgarber623/remote-template/releases) from GitHub and do it yourself _(old school)_.\n- Install using [npm](https://www.npmjs.com/package/@jgarber/remote-template): `npm install @jgarber/remote-template --save`\n- Install using [Yarn](https://yarnpkg.com/en/package/@jgarber/remote-template): `yarn add @jgarber/remote-template`\n\n## Usage\n\nFirst, add this `\u003cscript\u003e` element to your page which defines the `\u003cremote-template\u003e` Web Component:\n\n```html\n\u003cscript type=\"module\" src=\"remote-template.js\"\u003e\u003c/script\u003e\n```\n\nThe `\u003cremote-template\u003e` Web Component may then be used to append a `\u003ctemplate\u003e` element loaded from a remote URL:\n\n```html\n\u003cremote-template src=\"/templates/basic.html\"\u003e\u003c/remote-template\u003e\n```\n\nThe response text of `basic.html` is queried for a `\u003ctemplate\u003e` element. If none is found, this Web Component treats the response text as a \"bare\" template, wrapping a `\u003ctemplate\u003e` element around the contents before appending to the DOM.\n\nThe following two examples are functionally equivalent:\n\n```html\n\u003ctemplate\u003e\n  \u003cp\u003eHello, world!\u003c/p\u003e\n\u003c/template\u003e\n```\n\n```html\n\u003cp\u003eHello, world!\u003c/p\u003e\n```\n\nYou may also use a fragment identifier to append a specific `\u003ctemplate\u003e` from a collection of templates embedded in a single HTML file:\n\n```html\n\u003cremote-template src=\"/templates/collection.html#template-2\"\u003e\u003c/remote-template\u003e\n```\n\nThe HTML file at `/templates/collection.html` may contain something like:\n\n```html\n\u003ctemplate id=\"template-1\"\u003e\n  \u003cp\u003eHello from Template #1!\u003c/p\u003e\n\u003c/template\u003e\n\n\u003ctemplate id=\"template-2\"\u003e\n  \u003cp\u003eHello from Template #2!\u003c/p\u003e\n\u003c/template\u003e\n```\n\n\u003e [!NOTE]\n\u003e Fragment identifiers _can_ match attributes other than `id`. For the purposes of this Web Component, fragment identifiers are considered `id` attribute values.\n\nThis Web Component may also be embedded in other Web Components to achieve various effects:\n\n```html\n\u003cparent-component\u003e\n  \u003cremote-template src=\"/templates/shared.html\"\u003e\u003c/remote-template\u003e\n\n  \u003cp slot=\"greeting\"\u003eCall me Ishmael.\u003c/p\u003e\n\u003c/parent-component\u003e\n```\n\n\u003e [!TIP]\n\u003e See the [Events](#events) documentation below for details on how to respond to events dispatched by the `\u003cremote-template\u003e` Web Component.\n\n\u003e [!IMPORTANT]\n\u003e Unfortunately, this implementation will not work with [Declarative Shadow DOM](https://github.com/mfreed7/declarative-shadow-dom). In that mode, `\u003ctemplate\u003e` elements must be present in the document when the HTML parser executes.\n\n### HTTP Request Headers\n\nWhen fetching remote templates, this Web Component uses the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) with the following [HTTP request header](https://developer.mozilla.org/en-US/docs/Glossary/Request_header):\n\n```txt\nAccept: text/template+html, text/html\n```\n\nNote that `text/template+html` is not an official [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types). You can just like… make things up. Despite this, its presence may be useful if you configure your application server to respond differently based on this value. Otherwise, [plain old semantic HTML](https://microformats.org/wiki/posh) works just fine.\n\n## Events\n\nThe `\u003cremote-template\u003e` Web Component dispatches a `load` event after the remote template has been successfully fetched and appended to the DOM. Listening for this event is most useful when embedding a `\u003cremote-template\u003e` within another Web Component.\n\n```js\nconnectedCallback() {\n  this.addEventListener(\"load\", this);\n}\n\nhandleEvent(event) {\n  if (event.type === \"load\") {\n    const shadow = this.attachShadow({ mode: \"open\" });\n    shadow.append(this.querySelector(\"template\").content.cloneNode(true));\n  }\n}\n```\n\nAn `error` event may be emitted if the Web Component encounters a problem loading the remote template. In this case, the underyling `Error` may be accessed by inspecting the event's `detail` property.\n\n```js\nconnectedCallback() {\n  this.addEventListener(\"error\", this);\n}\n\nhandleEvent(event) {\n  if (event.type === \"error\") {\n    console.error(\"Error loading remote template:\", event.detail.error);\n  }\n}\n```\n\n## License\n\nThe `\u003cremote-template\u003e` Web Component is freely available under the [MIT License](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgarber623%2Fremote-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjgarber623%2Fremote-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgarber623%2Fremote-template/lists"}