How to build Webcomponents with Lit

1. Webcomponents from 0-100
Codelab, Google IO extended 2022, Aalborg
With Googles Lit-library

2. Hi, Im Filip
CTO at Umbraco
GDE for webtechnologies
@
fi
lipbech

3. What are webcomponents
• Extend HTML with your own elements
• Encapsulate styling and functionality

4. Why would you use them
• Interoperability
• Native performance and no EOL
• As a primitive - they work with your framework

6. How to consume webcomponents
• Like any other DOM element
• Events and properties

7. How to make a webcomponent
• Make a class that extends HTMLElement
• Register it with a tagName by calling customElements.de
fi
ne()
• Add encapsulation if needed
• Respond to lifecycle, changes to properties or attributes,
• Add public methods as needed
• Render UI

12. Lifecycle
• connectedCallback()
• disconnectedCallback()
• attributeChangedCallback() - for observedAttributes
• adoptedCallback()

13. Property changes
• Use Setters on the class-property

14. Property vs attribute
• Attributes can only be strings
• Attributes affect rendering directly
• Attributes are NOT case-sensitive
• Advise: Use properties by default, and change to attribute when you have
the need

15. Lit?

16. Lit
• Makes it easy to actually build on
• Built by Google - the successor of Polymer!

17. What will I use
• ‘LitElement’ baseclass
• Implement a render()-method
• Template Literal Tag(s) for templating

19. What are template Literal Tags
• “functions” that controls the interpolation
• Called by prepending them to the templateLiteral de
fi
nition
• Can return anything

20. Lit’s html-tag
• It makes rendering easy and ef
fi
cient
• Listening to events declaratively

22. Build something real
• Encapsulate functionality and UI
• Modern architecture
• Tree of components
• Properties
fl
ow down
• Events go up
• Bring your own state and other utilities if you need them

23. Properties
• Declare properties as reactive for automatic template re-rendering
• Set in render-function with html-tag using the dot-pre
fi
x

29. Events
• Listen for events (custom or standard) with the @-notation
• Dispatch your own custom events with custom details

31. Lets code something…
https://github.com/
fi
lipbech
webcomponents-with-litelement-demo

32. Up and running
• Clone repo
• Npm install
• Npm start

34. Ideas to work on
• Build it yourself
• get list from server
• store favorites
• toggle to only show favorite

35. Just want to play?
• lit.dev/playground/

36. https://www.youtube.com/watch?v=ADgo_JVK02A

37. Thank you for listening
I’m @filipbech