Web components
Custom elements built on browser standards rather than on a framework, so they work in any page regardless of what else is running. Web Awesome and Lit sit here as a component library and the toolkit for authoring such components.
Browser-native custom elements and the libraries I use for them: Lit for writing my own, and Web Awesome, which this site is built on.
From the blog
Related writing
Articles from JWS News and DEV that relate to web components.
How to use Vue and i18n to offer your site in multiple languages
I am genuinely surprised we haven’t covered this topic before, given that it is one of the most powerful ways to instantly level up a web application. Today, we are tackling internationalization, showing you how to easily offer your website in multiple languages. The web is inhe…
Building a full web form using Vue and Web Awesome
Previously, we learned how to build dropdowns, radio button groups, buttons, and combo boxes. I figure the next step is to put it all together and build a full web form. In today’s demo, we are going to build a “feedback” form where someone provides their name, conta…
How to use wa-combobox with Vue
Previously, we used wa-dropdown to build a state, city, and zip dropdown set, and two years ago, we looked at implementing autocomplete with Vue. Today, we are going to look at how to use Web Awesome’s Combobox component to combine the two. This demo uses the same dataset that I…
How to pass an array as a property into a web component
In last week’s post, I said, “That is because you can not pass an array directly into a web component”. I said that I might take a moment at some point to talk about how you could do that. Well, today is the day we are doing that.
How to implement an autocomplete using Web Components
Earlier this week, when I wrote about how to build an autocomplete using Vue.js, it was less about exploring how to do it and more about documenting recent work that used Vuetify. I wanted to use today’s post to go in the other direction. Recently, I discovered the value of usin…
Playing more with Web Components
Yesterday, we looked at how to define our own web components and how to use web components that were defined using Shoelace. Today, I figured that we should take a quick look at Lit. Lit is a simple library for building fast, lightweight web components.
Finding related thoughts…