Lit-html: How to use lit-html from CDN

[richardanaya]

Could you provide an example of using lit-html from CDN please

[richardanaya]

Perhaps you can add umd minfied output to build?

[nicolasparada]

You can import it from a <script type=module>:

import { html, render } from 'https://unpkg.com/[email protected]/lit-html.js'

That since Safari, Chrome and Edge do support modules ✨

[richardanaya]

Would it not be preferable to have a babelified minified version that can be used by more browsers to play with?

module seems very new

[nicolasparada]

I think "babelifying" it's of users land. Like when you add polyfills and that sort of thing.
I think that the way lit-html is distributed is the right way, but maybe a minified version could be handy.

[richardanaya]

It is your project, I think it just does not lend itself well to people sharing code on code pen:

Observe: https://codepen.io/kenbrown/pen/xXjQoZ

How the code must be put in html

It looks worse on jsfiddle

Not to mention browsers without type=module

[arkajyotiMukherjee]

You can only provide styles in lit-html using

1. style tags as ${ } do not interfere with { } of CSS and
2. using inline styling

@richardanaya I modified your pen on codepen here:

https://codepen.io/the_guy_with_pajamas/pen/wypXrm

[smuszel]

But how to import directives that way?

import { html, render, guard } from 'https://unpkg.com/lit-html?module'; // complains guard not found

[justinfagnani]

import { guard } from 'https://unpkg.com/lit-html/directives/guard.js?module';