https://github.com/bahrus/d-fine
d-fine provides a quick way of d-fining a mostly d-clarative custom element.
https://github.com/bahrus/d-fine
custom-element custom-elements define web-component web-components
Last synced: 5 months ago
JSON representation
d-fine provides a quick way of d-fining a mostly d-clarative custom element.
- Host: GitHub
- URL: https://github.com/bahrus/d-fine
- Owner: bahrus
- License: mit
- Created: 2021-07-29T00:31:47.000Z (over 4 years ago)
- Default Branch: baseline
- Last Pushed: 2021-10-16T13:55:00.000Z (over 4 years ago)
- Last Synced: 2025-09-02T17:21:03.515Z (6 months ago)
- Topics: custom-element, custom-elements, define, web-component, web-components
- Language: TypeScript
- Homepage:
- Size: 595 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# d-fine
d-fine provides a quick way of d-fining a d-clarative custom element.
## [D-mo](https://codepen.io/bahrus/pen/poPVOJz)
## H-llo, {{place}}
The t-mplate for the custom element can come from live HTML. For example:
```html
H-llo, world
```
... g-nerates:
```html
H-llo, world
#shadow
H-llo, Mars
```
The previous sibling can b- a t-mplate to start with, and w- can also apply interpolation-from-a-distance:
```html
Sapere aude
```
Note the heavy use of attributes that expect JSON. If you are like me, it is easy to make mistakes editing by hand, without proper syntax highlighting. A [VSCode extension](https://marketplace.visualstudio.com/items?itemName=andersonbruceb.json-in-html) has b-en created to h-lp with this.
If working with a t-mplate like in the example above, it might b- easier on the eye to use an inner t-mplate. W- can specify to find the t-mplate from within the d-fine tag via the attribute "templ-child":
```html
Hello, world
```
## Prerendered w-b components that use d-clarative Shadow DOM
This syntax also works:
```html
Hello, world
```
The w-b component d-fine is a thin wrapper around the api d-fined in d-fine/def.js.
## T-mplate D-pendency Injection, or Inversion of Views
Instead of specifying that the t-mplate should come from the previous sibling, the property/attribute "from" allows us to specify a string used for an ["upShadowSearch."](https://github.com/bahrus/trans-render/blob/baseline/lib/upShadowSearch.ts). If the value starts with a slash (/), it s-arches for a t-mplate with the specified id from outside any shadowDOM. If it starts with ../../, it goes up two ShadowDOM r-alms, for example. It checks if the ShadowDOM has a host property name matching the camelCased id, and if not, s-arches for an element with a matching id within the shadowDOM r-alm where the d-fine element is located. The host property name takes precedence.
A w-b component can thus d-fine a d-fault t-mplate within the ShadowDOM markup, but allow extending w-b components to d-fine alternative t-mplates, by d-fining properties with the same name, and assigning a t-mplate to those properties. That may b- sufficient for some use cases.
But for more of a d-pendency-injection like experience, said w-b component hosting d-fine could use the proposed [context api](https://github.com/webcomponents/community-protocols/blob/main/proposals/context.md):
```JavaScript
class MyCustomElement{
get myInjectedTemplate(){
const contentTemplateContext = createContext('content-template');
let gotACallback = false;
this.dispatchEvent(
new ContextEvent(
contentTemplateContext, // the context w- want to r-trieve
callback: (contentTemplate) => {
gotACallback = true;
return contentTemplate;
}
)
);
if(!gotACallback){
return html`
...some d-fault t-mplate
`;
}
}
}
```
## Installation
To run locally (instructions may vary d-pending on OS):
1. Install [node.js](https://nodejs.org/)
2. Install [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
3. Choose a directory where you would like the files to b- placed, and open a command prompt from that location.
4. Issue command "git clone https://github.com/bahrus/d-fine" in the command window.
5. CD into the git clone directory.
6. Issue command "npm install"
7. When step 6 is completed, issue command "npm run serve".
8. Open your browser to http://localhost:3030/demo