Web components

Web components are a set of web platform APIs that allow you to create new custom HTML tags to use in web pages and web apps whatever it's the Javascript framework, library or Vanilla JS you use for your apps.

But, is it possible to use Web Components in React or React to create Web components?

According to React documentation: "React and Web Components are built to solve different problems... As a developer, you are free to use React in your Web Components, or to use Web Components in React or both"

We could start to play with some simple examples to know limitations about that.

Conclusions

When we are working with web components (naming too custom-elements) we have to think about two different ways:

• Create web component
• Use web component

That means, we could create a web component with one technology and consume it with other one (as we did on samples 03 Using web components in Preact).

Create WC with React

Right now, it exists several tools / libraries to create web components:

• Todo-list app: show a todo-list app implemented with different tools.
• And the syntax differences

If we want use React for that purpose:

• Official React support: there is a RFC: Plan for custom elements in React 17 with some proposals like below but it isn't confirmed yet.

    const XFoo = ReactDOM.createCustomElementType({
      element: ‘x-foo’,
      ‘my-attr’: // something that tells React what to do with it
      someRichDataProp: // something that tells React what to do with it
    });

• Skatejs + React: you could implement your components with React and then use a wrapper to expose web components props, etc. Skatejs has other renders like Preact or LitHTML.

• Reactive elements: 0.10.0v. Similar lib with wrapper over React component but with some special properties like reactive-elements-no-boolean-transform.

• React-web-component: 1.3.0v. It has the wrapper and the possibility to use WC lifecycle methods inside React components.

Use WC on React

In previous examples, we saw that React supports only primitive data pass down through properties. That means we can not pass objects, arrays or callbacks. We have even noted that handling events with React and WC could be cumbersome due to we have to use a workaround to listen events like we saw on 02 Simple Form example:

export class Form extends Component {
  nameRef = React.createRef();

  componentDidMount() {
    this.nameRef.current.addEventListener('input', this.onChangeNameHandler);
  }

  onChangeNameHandler = e => {
    const value = e.target.value;
    this.props.onFieldChange('name', value);
  };

  render() {
    return (
      <form>
        <wired-input
          ref={this.nameRef}
          placeholder="Name"
          value={this.props.user.name}
        />
      ...
    );
  }
}

• Unit test for React WC support

If we using Preact, we can pass rich data like objects or arrays. Also, we can handle events in a declarative way like:

<my-component
  oncustomevent={this.handleCustomEvent}
  oncustom-event={this.handleCustomEvent}
/>

But it doesn't support camelCase syntax. Unit test for Preact WC support

Web Components React Roadmap

• RFC: Plan for custom elements in React 17 opened on 24 Oct 2017. Not closed yet.

Resources

• Webcomponents.org

• React / Web components

• Can I use web components?

• Web components polyfills

• custom-elements-everywhere

About Basefactor + Lemoncode

We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.

Basefactor, consultancy by Lemoncode provides consultancy and coaching services.

Lemoncode provides training services.

For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend