Loading…

Joe Steinbring

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 to author and distribute them.

Explore Web Components

Web AwesomeI use Web Awesome, formerly Shoelace, to build reusable, standards-based web component interfaces across frameworks. I came to it after running into the limits of component kits like Bootstrap, Vuetify, and Bulma, and it is built on Lit.LitI have used Lit to author lightweight web components with reactive properties, templates, and encapsulated styles.

From the blog

Related writing

Articles from JWS News and DEV that relate to Web Components.

Finding related posts…

From CodePen

Small, self-contained Web Components examples that I published publicly.

  1. Autocomplete -- Web Component 1

    See it runningSee the code

  2. Autocomplete -- Web Component 2

    See it runningSee the code

  3. Autocomplete -- Web Component 3

    See it runningSee the code

  4. Autocomplete -- Web Component 4

    See it runningSee the code

  5. Lit array output -- 1

    See it runningSee the code

  6. Lit array output -- 2

    See it runningSee the code

  7. Lit array output -- 3

    See it runningSee the code

  8. Web Components -- Lit 1

    See it runningSee the code

  9. Web Components -- Lit 2

    See it runningSee the code

  10. Web Components -- Simple

    See it runningSee the code

  11. Web Components 101

    See it runningSee the code

View all of my pens on CodePen

From GoToSocial

Related thoughts

Short posts about Web Components, matched by topic hashtags.

  • #webcomponents
  • #customelements
Finding related thoughts…