Hacker News new | ask | show | jobs
by ahallock 2616 days ago
Can you use this outside of React? I'm interested in the styles, but I'm not using React.
1 comments

This is why Web Component interest is growing, especially w/ enterprises and large teams. The killer app for WC's is building Design Systems that don't force specific frontend framework decisions.
Do you have a source? I’d like to explore WC, but from what I have gathered WC evangelist are dying out to React ecosystem.
Yup this is the future. WC's are finally supported everywhere with Edge switching to chromium under the hood.
I've gotten into quite a few debates about this at work and I still don't get why some people are proponents of web components. If you're already a React shop, web components don't seem to be worth the trouble.

1. Web components don't always have the same properties and events as native DOM elements. React provides a ton of conveniences around native elements such as <input> (onChange, defaultValue, className, etc). React even normalizes events across browsers (https://reactjs.org/docs/events.html). If I'm writing a React component that renders a web component, I lose most of those conveniences. The times I've tried using web components at work, I've been bit by issues like web components emitting custom events instead of onclick/onchange/onblur/etc. I've also encountered a web component that was supposed to behave like an input, but element.value didn't return the same thing as element.getAttribute('value').

2. Web components tend to be imperative while React is declarative. That means I have to use a ref to keep a handle on the web component and call functions on it. In many cases, I also have to keep some state in the parent React component to track the web component's internal state.

3. React's lifecycle methods fire when the web component is rendered, not when the web component is "ready". I've had issues where componentDidMount fires, but my ref to the web component doesn't yet have attributes that a normal DOM element would have (such as .value). This makes React's lifecycle methods far less useful and forces me to write guards that aren't necessary with a native DOM element or another React component.

4. It's still not clear to me how web components are supposed to communicate with each other. With React you're either setting state, passing in different props, using context, or using a library like redux (which injects shared state & actions as props). React's solution to this problem is well-structured, understandable, and exposed in React dev tools. With web components, it's still the wild west.

5. Web components accept attributes (which are text only) and slots. React components accept props which can be strings, objects, components, functions, arrays... pretty much anything. If I'm writing a React component that renders a web component, my brain has to switch out of React mode and into web component mode. I get no propTypes validation and I occasionally have to manually translate data between React world and web component world.

In practice I've also encountered issues with development velocity. At work, the team writing web components has taken months to implement basic things such as inputs and callouts. None of their web component code is in production yet. In the same amount of time, a smaller team of devs has used React to build more components and has shipped them to prod.