LitElement tutorial part 2: Templating, properties, and events

[@GorillaDevFB]

So helpful. My company is converting over from Polymer 2 to lit-html/ LitElement and these videos are helping me so much! Thanks man!

[@marcushellberg13]

Awesome. I'm glad to hear that! They should still be mostly up to date, with the exception of `styles` for CSS instead of the tag in the template lit-element.polymer-project.org/guide/styles#where

[@GorillaDevFB]

@@marcushellberg13 great! Thanks for the tip.

[@jofftiquez]

Hello, great tutorial, what VS Code plugin are you using for lit-element html formatting?

[@ΣτάθηςΣταθόπουλος-σ7ρ]

lit-html by Matt Bierner

[@8o8inSquares]

If someone wants to do it with pure html elements, for example using input type text instead of vaadin's input, instead of value, use .value and it should work

[@dcts7526]

I didnt get how this would look like? Do you mind explaiing in more detail how you did it with the input element?

[@ronanfegan799]

@@dcts7526 Something like this:

[@Oswee]

Really great series! Would like to see more.

[@marcushellberg13]

Thanks! Do you have any specific topic you would like to see?

[@Oswee]

@@marcushellberg13 Hi. Sorry, but i think my lak of competency does not allow to give clear answer. I just got out of Golang and Event Sourcing (microsrvices) basics learning and started to move into front-end. I really like concept of web components and i trully want to build my future ERP kind product on top of custom elements. From my, as programming newbie, perspective i would like to see more modern design pattern stuff of creating mid-complex web software/app in context of custom elements. Like all this modern workflow - Webpack, babel, fetch, modules, classes etc. Kinda "development workflow/patterns of 2020" coz custom elements still gaining their traction and by showing modern design patterns (good practices) there is a option to bring in more new developers. I will continue tomorrow to watch last video and will try to build some new components and then probably i will have some more thoughts. I wrote several components already but it seems that i learned from outdated materials. In general... do not listen me. I am too new in programming to say something meaningfull. :) :) BTW - Vaadin elements looks really nicely designed. Like them much more than polymer/material desing. For desktop.

[@marcushellberg13]

@@Oswee Thanks. Those sound like good ideas. I'll think of how to use them as base for new tutorials.

[@Oswee]

@@marcushellberg13 Ouh. In terms of components one of the first i want to build is websockets based data grid (table) with option to reorder rows by DnD. As feature will try to work on buffered scrolling. But for tutorial serries it probably will be too complex.

[@marcushellberg13]

@@Oswee The Vaadin Grid allows you to do buffered scrolling with the dataProvider callback vaadin.com/components/vaadin-grid/html-examples/grid-data-demos. It allows you to reorder columns, but doesn't support reordering rows as of now. If that's something you would like to see, add a ticket on GitHub for the Grid so the dev team knows that there's a need for that.

[@matteobadini6419]

Sorry if this sounds silly, but how did you get syntax highlighting inside template literal?. I use VS Code and it doesn’t work for me. Awesome series by the way!

[@marcushellberg13]

There is a VS Code plugin for syntax highlighting and HTML support marketplace.visualstudio.com/items?itemName=bierner.lit-html Prettier also supports lit-html so you can get code formatting inside the template if you have it installed.

[@matteobadini6419]

@@marcushellberg13 I've installed the lit-html extension but nothing changed. Am I missing something? Thank you in advance for your patience

[@matteobadini6419]

Solved! It was a conflict with another extension.

[@BrandonMcEachern19]

@@matteobadini6419 Thanks, same here.

[@justindb83]

Do you take a hit on performance by not using the shadow dom?

[@rahulkrishna631]

Do you have information about how to write a test cases in open-wc/lit-element

[@Aemulatius]

Why did u add the change event on the input ? Is binding the value not enough via .value=this.task ?

[@marcushellberg13]

lit-html doesn't have a concept of 2-way data binding. You can only set properties and will then need to listen to events and update things accordingly. This means that there's less magic, but also a bit more boilerplate. It's more or less the same as how things work in React, for instance. I'm not sure, but I would imagine that there are some form helpers for lit out there, to make data binding easier if you have more inputs

[@Oswee]

Text version is asking for password. Had a issues with WebPack almost on every step. :) But for now trans-piled down to just es2017 and was forced to use 'transform-object-rest-spread` babel plugin.

[@marcushellberg13]

Sorry about that, I fixed the link. What specific issues have you had with webpack?

[@HermannSchwarz]

Typo in Object.valuEs. And the event listener in @value-changed doesn’t fire. I tried .value instead of value, but still doesn’t work.

[@HermannSchwarz]

Oh sorry, I forgot to import vaadin-radio-group. It works fine now.

[@fairyanimal]

$0 in the page is undefined for me. what can be wrong?

[@marcushellberg13]

$0 in the dev tools refers to whatever element you have selected in the element window. Sounds like you don't have anything selected there.

[@arithmetics]

thanks for posting these

[@ArnavSingh-im5bj]

you are awesome

[@marcushellberg13]

Haha. Thanks!