https://github.com/bahrus/be-fetch
https://github.com/bahrus/be-fetch
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bahrus/be-fetch
- Owner: bahrus
- License: mit
- Created: 2024-03-30T18:26:31.000Z (about 1 year ago)
- Default Branch: baseline
- Last Pushed: 2024-04-26T21:52:48.000Z (about 1 year ago)
- Last Synced: 2024-12-31T23:11:52.608Z (5 months ago)
- Language: TypeScript
- Size: 22.5 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# be-fetch
*be-fetch* turns the tag it adorns into a web component that inherits from [fetch-for](https://github.com/bahrus/fetch-for).
It provides a way to declaratively define custom elements without script, but is strictly limited to non-visual "web components as a service" type custom elements.
```html
...
```
Because newton-microservice gets turned into a web component, we can reuse the tag elsewhere in the document (no need for the enh-be-fetch attribute once it is registered).
But don't get your hopes up too high -- all the other attributes shown above will also need to be specified (no sharing of default property values is created on the fly, in case you were wondering about that.)
## Using a custom web component to extend. [Untested]
The *fetch-for* web component is a fairly non-opinionated web component. But often times any particular app will want to make particular choices as far as how to define the base url for all the fetch requests, credentials, JWT headers, etc. fetch-for provides [many small methods](https://github.com/bahrus/fetch-for/blob/baseline/fetch-for.ts) that can be overridden to allow this to be customized according to such needs.
Such app's can define their own web component, most likely extending fetch-for.
be-fetch can be instructed to use this custom web component definition, instead of the default fetch-for, via two alternate ways (or combine as needs warrant):
### Approach 1 (DRY)
Somewhere in the document (probably ideally within the head tag at the top), add a "link" tag (or any other tag really) with id be-fetch, and attribute data-inherits. For example:
```html
```
### Approach 2 (Highly customizable)
specify the custom element name to inherit from within the adorned tag itself:
```html
```