https://github.com/bahrus/litter-g
Use lit-html inside an html element
https://github.com/bahrus/litter-g
customelement customelements lit-html webcomponent webcomponents
Last synced: about 2 months ago
JSON representation
Use lit-html inside an html element
- Host: GitHub
- URL: https://github.com/bahrus/litter-g
- Owner: bahrus
- License: mit
- Created: 2018-08-31T23:12:32.000Z (almost 7 years ago)
- Default Branch: baseline
- Last Pushed: 2021-05-28T20:44:00.000Z (about 4 years ago)
- Last Synced: 2025-03-13T04:19:12.871Z (3 months ago)
- Topics: customelement, customelements, lit-html, webcomponent, webcomponents
- Language: TypeScript
- Homepage:
- Size: 438 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.webcomponents.org/element/litter-g)
[](https://github.com/bahrus/p-et-alia/actions?query=workflow%3ACI)
# litter-g
## Use Case
The use case for litter-g is spelled out quite nicely by [React's introductory pages](https://reactjs.org/docs/add-react-to-a-website.html):
>The majority of websites aren’t, and don’t need to be, single-page apps. With a few lines of code and no build tooling, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.
In one of their [examples](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html) they show how you can use React inside a script tag. litter-g does something similar, but with lit-html.
Note: litter-g hopes to improve on the ergonomics of a similar component, [xtal-method](https://www.webcomponents.org/element/xtal-method). Both components are meant for applications that aren't necessarily built on a JavaScript-centric paradigm. Applications that may be built using a server-centric framework, which just wants to strategically shake some JavaScript pixie dust as needed. Or maybe applications that are built using some "old" framework like Cold Fusion, but want to slowly convert into something more modern.
## Syntax
The litter-g element applies its services onto the next sibling element:
```html
html`${input.map(i => html`<li>${i}</li>`)}`
...
pronounList.input = ["He", "She", "They", "Other"];
```
Here, we are relying on the fact that giving a DOM element an id ("pronounList"), that id becomes a global constant, if the DOM element is outside ShadowDOM.
You can also specify the input via a JSON attribute:
```html
html`${input.map(i => html`<li>${i}</li>`)}`
```
The snippet of lit syntax contained within the script child becomes the innerHTML renderer, and it re-renders anytime the input property changes.
## [Demo](https://jsfiddle.net/bahrus/ma2y8ev0/6/)
Longitude:
tr = ({_latitude, _longitude}) => html`
<a href="http://www.gps-coordinates.org/my-location.php?lat=${_latitude}&lng=${_longitude}" target="_blank">
(${_latitude},${_longitude})
</a>
`;
.fieldInput{
display:flex;
flex-direction: row;
}
label{
display:flex;
flex-direction:row;
}
```
-->
## Directives
All the lit-html directives that are part of the lit-html library are available for use.
## Event Handling
It's a bit "hackish", but you can add event handlers, if you are careful to demark where the event handlers end, and the template begins, via the "magic string" //render:
```html
function clickHandler(e){
console.log(e);
}
//render
html`${input.map((item, idx) => html`<li @click="${clickHandler}" id="li_${idx}">${item}</li>`)}`
```
## Multivariable Functions
Sometimes we want a ui element to depend on more than one input parameter.
```html
...
tr = ({latitude, longitude}) => html`
<a href="http://www.gps-coordinates.org/my-location.php?lat=${latitude}&lng=${longitude}" target="_blank">
(${latitude},${longitude})
</a>
`
```
and does the following:
1) Dynamically adds properties latitude, longitude to the litter-g instance.
2) Updates the input property any time either of those properties change (with a little debouncing [TODO](https://dev.to/thepassle/litelement-a-deepdive-into-batched-updates-3hh)), thus causing lit-html to re-render.
**NB I:** The "tr = " is optional text. This allows VSCode to recognize the expression, and provide helpful syntax coloring, autocomplete, etc. tr stands for "template result."
You can also add event handlers just as before, separated by the //render comment.
## [IE11 Support](https://youtu.be/YVi6ZYzD_Gc?t=275)
## Viewing Your Element
```
$ npm install
$ npm run serve
```
## Running Tests
$ npm run test