Problem/Motivation
In the comments in both https://dri.es/drupal-looking-to-adopt-react and #2913321: Proposal to experiment with React for building Drupal’s administrative UIs, people are expressing concern about React "not supporting" web components.
This is partially based on https://custom-elements-everywhere.com/ giving it a score of 16/30, compared to many other frameworks, such as Vue, scoring 30/30.
The two problems identified there are:
- React passes the react element props to the custom element dom via attributes rather than properties. This has several problems with respect to the web components specification, including the inability to pass rich (objects, arrays) data. In contrast, Vue includes a template syntax for controlling what to send as an attribute vs. what to send as a property.
- React doesn't automatically listen to DOM events from the custom element. Event listeners need to be manually attached. In contrast, Vue's
v-on
directive listens to DOM events.
React has open issues for these, and might or might not fix them in future versions.
However, in the meantime, these two things can be fairly easily integrated into a wrapper element written in React. WordPress has an open pull request, which includes a React ComponentInterop
wrapper component that manages the attributes/properties distinction. WordPress doesn't currently have a use case for listening to Gutenberg block events, but if they did, they could just as easily add event listener attachment code within ComponentInterop
, such as the kind in the proof of concept example in https://staltz.com/react-could-love-web-components.html.
Proposed resolution
See remaining tasks.
Remaining tasks
Given the ability to easily create a React wrapper component, such as WordPress is doing, to be able to fully support web components in React, is there any actual problem in React not supporting those two features natively?
Comments
Comment #2
effulgentsia CreditAttribution: effulgentsia at Acquia commentedFor anyone following this issue, I just want to give a quick update that this topic is being discussed in this React issue, which itself is a continuation of earlier issues.
As summarized in that issue, custom elements already work perfectly fine within React 16. It is merely that the existing syntax is cumbersome for setting properties (as opposed to attributes) and attaching event listeners. There's comments on that issue with ideas on how to improve that from the maintainers of React, Polymer, Skate, Preact, and possibly other projects. I've also been commenting on that issue.
This comment and this comment contain my latest proposal, which evolved from all the other comments in that issue. Those have gotten a thumbs up from @robdodson (Polymer maintainer) and @treshugart (Skate maintainer), but we're waiting to hear back from the React maintainers on their thoughts.
Comment #4
effulgentsia CreditAttribution: effulgentsia at Acquia commentedAnother update:
- Last month, React introduced a new RFC process.
- Today, @robdodson from the Polymer team used this process and posted a React RFC to support custom elements better.
Let's see what happens with it :)
Comment #5
cosmicdreams CreditAttribution: cosmicdreams commentedAwesome news. thanks @effulgentsia.
On the other side, a number of us are attempting to gather at Drupalcon to have a more concrete roadmap for including Web Components (the standard not specifically Polymer implementation) this year.
Comment #6
cosmicdreams CreditAttribution: cosmicdreams commentedHey @effulgentsia: Came across this today:
https://itnext.io/a-little-web-component-in-my-react-3c66a918ea99
Looks like it may be possible to add-in Shadow Dom support to target elements. Maybe you understand this code better than I can. Is this a solution that can be dropped into what we're already doing?
Just implementing shadow dom alone would go a long way toward sandboxing the behaviors and appearance of components from whatever else is going on in a Drupal site. If can be relied upon, it could make developing components much easier.
Comment #14
andypost5 years passed https://github.com/facebook/react/issues/11347
Comment #15
shaalAt Phase2, we are using web components on all of our projects in the last year or two.
We created Outline design-system, which is open source and built with Lit2.
You can check out the style guide and Drupalcon presentation
Web components are fast, and supported by all modern browsers.
Drupal and the community could benefit from using web components, because we get to build a component once, and use it anywhere (Twig, Vue, React, etc.)
Think of Olivero menu, which is an accessibility masterpiece. That menu can become a web component, ie:
<drupal-menu>
, Drupal core can use it, as well as other projects, even if they're not Drupal.Each project can style the menu with CSS, but the great markup + JavaScript, which is required for the interactive parts and accessibility, are all bundled in.
<drupal-menu>
can work as-is, or it can be extended, wehn a project requires a different functionality.Comment #16
rpayanmI just discovered Lit and looks great!