Incomplete documentation on creating web components

[LukasBombach]

Hey there,

your documentation on creating web components with react is quite cool and works really nice for the html. However, any component created this way will be unstyled as the documentation does not cover how to add CSS to the web component. Using create-react-app all your CSS will end up in a main.hash.css file and have selectors for your components, but when you create a web component, you css must be encapsulated in the component as the the components DOM lives in the shadow root and is not stylable from outside.

It would be cool if you could show a way to account for this.

[MrBenJ]

@LukasBombach - I'd be happy to jump on this one and give it a shot. OK if I create a pull request with some examples @aweary ?

[LukasBombach]

@MrBenJ fwiw I am currently creating create-react-web-component, a fork of create-react-app that creates a web component. If you wanna compare notes on this I am happy to chat.

[LukasBombach]

Oh btw, I found out that creating a web component like this will actually not work at all. The problem is that events in the shadow DOM will not be registered by react! There is a work around for that, but it's ugly. I think I am going to file an issue for that.

[LukasBombach]

Created an issue: #10422

[bvaughn]

Thank you for filing this issue! 😄

The documentation and source code for reactjs.org now lives in a different repository: reactjs/reactjs.org. (For more info on why we made this move, see issue #11075.)

I've moved your issue to the new repo: reactjs/react.dev#72

Let's continue the discussion there! Sorry for the inconvenience.