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

effulgentsia created an issue. See original summary.

effulgentsia’s picture

effulgentsia CreditAttribution: effulgentsia at Acquia commented

For 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.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

effulgentsia’s picture

effulgentsia CreditAttribution: effulgentsia at Acquia commented

Another 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 :)

cosmicdreams’s picture

cosmicdreams CreditAttribution: cosmicdreams commented

Awesome 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.

cosmicdreams’s picture

cosmicdreams CreditAttribution: cosmicdreams commented

Hey @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.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

andypost’s picture

andypost
he/him
Primary language Russian
CreditAttribution: andypost as a volunteer and at Skilld commented

5 years passed https://github.com/facebook/react/issues/11347

shaal’s picture

shaal
he/him
Primary language English
Location Boca Raton, FL
CreditAttribution: shaal as a volunteer and at Phase2 commented

At 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.

rpayanm’s picture

rpayanm
he/him
Primary language Spanish
CreditAttribution: rpayanm commented

I just discovered Lit and looks great!

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.