Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jgarber623/remote-template
A dependency-free Web Component that fetches a URL and appends the response to a <template>.
https://github.com/jgarber623/remote-template
custom-elements customelements fetch-api html-template web-components webcomponents
Last synced: 2 days ago
JSON representation
A dependency-free Web Component that fetches a URL and appends the response to a <template>.
- Host: GitHub
- URL: https://github.com/jgarber623/remote-template
- Owner: jgarber623
- License: mit
- Created: 2024-03-14T13:01:15.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-03-15T13:54:03.000Z (7 months ago)
- Last Synced: 2024-09-21T02:02:29.434Z (6 days ago)
- Topics: custom-elements, customelements, fetch-api, html-template, web-components, webcomponents
- Language: HTML
- Homepage: https://www.npmjs.com/package/@jgarber/remote-template
- Size: 11.7 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `` Web Component
**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 [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).**
[](https://www.npmjs.com/package/@jgarber/remote-template)
[](https://www.npmjs.com/package/@jgarber/remote-template)
[](https://github.com/jgarber623/remote-template/actions/workflows/ci.yml)
🐶 🧩 **[See `` in action!](https://jgarber623.github.io/remote-template/example)**
## Getting ``
You've got several options for adding this Web Component to your project:
- [Download a release](https://github.com/jgarber623/remote-template/releases) from GitHub and do it yourself _(old school)_.
- Install using [npm](https://www.npmjs.com/package/@jgarber/remote-template): `npm install @jgarber/remote-template --save`
- Install using [Yarn](https://yarnpkg.com/en/package/@jgarber/remote-template): `yarn add @jgarber/remote-template`
## Usage
First, add this `` element to your page which defines the `<remote-template>` Web Component:
```html
<script type="module" src="remote-template.js">
```
The `` Web Component may then be used to append a `` element loaded from a remote URL:
```html
```
The response text of `basic.html` is queried for a `` element. If none is found, this Web Component treats the response text as a "bare" template, wrapping a `` element around the contents before appending to the DOM.
The following two examples are functionally equivalent:
```html
Hello, world!
```
```html
Hello, world!
```
You may also use a fragment identifier to append a specific `` from a collection of templates embedded in a single HTML file:
```html
```
The HTML file at `/templates/collection.html` may contain something like:
```html
Hello from Template #1!
Hello from Template #2!
```
> [!NOTE]
> Fragment identifiers _can_ match attributes other than `id`. For the purposes of this Web Component, fragment identifiers are considered `id` attribute values.
This Web Component may also be embedded in other Web Components to achieve various effects:
```html
Call me Ishmael.
```
> [!TIP]
> See the [Events](#events) documentation below for details on how to respond to events dispatched by the `` Web Component.
> [!IMPORTANT]
> Unfortunately, this implementation will not work with [Declarative Shadow DOM](https://github.com/mfreed7/declarative-shadow-dom). In that mode, `` elements must be present in the document when the HTML parser executes.
### HTTP Request Headers
When 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):
```txt
Accept: text/template+html, text/html
```
Note 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.
## Events
The `` 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 `` within another Web Component.
```js
connectedCallback() {
this.addEventListener("load", this);
}
handleEvent(event) {
if (event.type === "load") {
const shadow = this.attachShadow({ mode: "open" });
shadow.append(this.querySelector("template").content.cloneNode(true));
}
}
```
An `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.
```js
connectedCallback() {
this.addEventListener("error", this);
}
handleEvent(event) {
if (event.type === "error") {
console.error("Error loading remote template:", event.detail.error);
}
}
```
## License
The `` Web Component is freely available under the [MIT License](https://opensource.org/licenses/MIT).