Skip to content

Adding section to docs/web-components #2682

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Adding section to docs/web-components #2682

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions content/docs/web-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,3 +60,22 @@ customElements.define('x-search', XSearch);
>
>This code **will not** work if you transform classes with Babel. See [this issue](https://github.com/w3c/webcomponents/issues/587) for the discussion.
>Include the [custom-elements-es5-adapter](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#custom-elements-es5-adapterjs) before you load your web components to fix this issue.

## Additional toolchains and resources {#additional-toolchains-and-resources}

Given some of the fundamental differences between React and Web Components, using them together usually doesn't come without some tweaking and tuning in order to align React's Virtual DOM and Web Component's Shadow DOM.
There exists various resources available to make this process a little easier.

### Direflow {#direflow}

[Direflow](https://direflow.io/) is a new project that provides a toolchain for using React together with Web Components and attempts to solve all major issues with integrating the two technologies.
Direflow is based on [Create React App](https://create-react-app.dev/docs/getting-started/) and the setup will feel very familiar.

### ReactShadow {#reactshadow}

[ReactShadow](https://github.com/Wildhoney/ReactShadow#readme) is a module that offers to utilize Shadow DOM in React with all the benefits of style encapsulation.
ReactShadow also handles a common problem with React and Web Components; event propagation through the Shadow DOM.

### react-shadow-dom-retarget-events {#react-shadow-dom-retarget-events}

[react-shadow-dom-retarget-events](https://github.com/spring-media/react-shadow-dom-retarget-events#readme) is a module that specifically handles the issue with event propagation when events are triggered from within a Shadow DOM inside a React app.