Menu
I started trying out lit-html and lit-elements, playing around with it and now I git in the problem where I cannot find out how to publish such code online. Never worked with Node-js packages on online platforms, only used bits of code from it. Normaly I build plain php/html templates, but I wanna try this.
Build some test cases localy that work. But googled all over the place to find out how i can publish this kind of code online to the internet. I am using a shared hosting with many options like SSH e.g. But can't find out what to do to get this working, it can't be as simple as running npm install on my server right?
649
LitElement is a simple base class for creating fast, lightweight web components that work in any web page with any framework. LitElement uses lit-html to render into shadow DOM, and adds API to manage properties and attributes.
Google's JS front-end solution is 'lit' Google's solution for templates is lit-html.
the best thing about the new world of web components, and lit-html and friends, is that we don't actually need npm, we don't need compilation, or any build step at all
these days, we can use es-modules to load things straight from a CDN like unpkg or jsdelivr
take a look at the demo on haunted's github readme — this is all you need!
<!doctype html>
<html lang="en">
<my-counter></my-counter>
<script type="module">
import { html } from 'https://unpkg.com/lit-html/lit-html.js';
import { component, useState } from 'https://unpkg.com/haunted/haunted.js';
function Counter() {
const [count, setCount] = useState(0);
return html`
<div id="count">${count}</div>
<button type="button" @click=${() => setCount(count + 1)}>Increment</button>
`;
}
customElements.define('my-counter', component(Counter));
</script>
check it out running live on this codepen example
👋 Chase
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
