DEV Community

Why I use Web Components - My use cases

Preet Shihn on June 21, 2019

First of all, I am not a blogger or advocate of any technology, or speak at events/conferences. So mind my first attempt at writing. I hope I am cl...
Read full post
Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦 • • Edited

Great write-up. Here's an example of your counter component written using hybrids. Devs might choose hybrids if they are looking to factor an app with a (mostly-)functional, highly composable component model.

import { define, html } from 'hybrids';

const inc = host => host.count += 1;

const MyCounter = {
  count: 0,
  render: ({count}) => html`
     <label for="button">${count}</label>
     <button id="button" onclick="${inc}">Increment</button>
  `
};

define('my-counter', MyCounter);
Collapse
 
smalluban profile image
Dominik Lubański •

I didn't know that I have an ambassador of the project :) It so cool to see that other people uses your work.

Collapse
 
westbrook profile image
Westbrook Johnson •

Great first foray into the written tech word! Love you work in the abstract; wiredjs.com/, brickception.xyz/, etc. It's really useful to hear a little more practically how you come to those ideas being useful in your everyday work.

Thanks so much for sharing!

Collapse
 
shihn profile image
Preet Shihn •

Thanks. I'm always jealous of people who are excellent communicators, especially when writing. Never delved into it. Practice is the key I suppose.

Collapse
 
paulmaly profile image
PaulMaly •

Actually, Svelte components are just stand-alone JS classes. So, you can use them in React/Vue/Angular/Whatever apps.

Collapse
 
shihn profile image
Preet Shihn • • Edited

Theoretically sure. Not in the same way really. One of these works.

<ReactComponent>
  <SevleteComponent></SevleteComponent>
</ReactComponent>

<ReactComponent>
  <web-component></web-component>
</ReactComponent>

Also, WCs you can use is raw HTML as well or anywhere that takes html. So people who are not JS devs can use them easily (Not saying that WCs work without JS)

<body>
  <p>
    <my-fancy-image>
   </p>
</body>
Collapse
 
ackvf profile image
Vítězslav Ackermann Ferko •

link please

Collapse
 
eligoh profile image
Elijah Goh •

There's just so many library to choose from, anyone has a preferred web component builder lib and why?

Collapse
 
westbrook profile image
Westbrook Johnson •

I like to work with LitElement as it’s super slim on file size and the lit-html renderer that powers it is both fast and highly flexible. As for building, it plays fairly well with whatever tooling you’d prefer to use. However, the team at open-wc.org/ has some great suggestions of using it in concert with their suggested bundler Rollup, as well as some additional documentation of working with Webpack.