Seems like not working in react 15

[wildhoney]

Seems like not working in react 15

[Wildhoney]

Ahh I'm glad! Thanks @vhmth

[vhmth]

Same issue here.

[vhmth]

Also if you change:

ReactDOM.findDOMNode(this.parentNode).createShadowRoot()

to

ReactDOM.findDOMNode(this).parentNode.createShadowRoot()

you get errors about React.render being called. If you change those calls to ReactDOM.render, you run into the Only a ReactOwner can have refs. issue.

@DimitryDushkin is it safe to say this repo is no longer maintained?

[DimitryDushkin]

@vhmth Have no idea about this repo status.

However I've found correct solution to make React work with Shadow DOM — https://gist.github.com/DimitryDushkin/c091d5a6c33e10641eef0828261d5398

[Wildhoney]

I can look at upgrading ReactShadow to React 15 as they did make changes that would affect it. However I implemented Shadow DOM in Keo using React 15 which works perfectly fine, and so you could use that if it, although it is a little more in-depth than this module.

[Wildhoney]

@DimitryDushkin do you want to send in a PR, please?

[DimitryDushkin]

@Wildhoney I cannot promise, but I'll try because at the moment I'm not totally satisfied with solution provided in gist.

[Wildhoney]

Okay, thanks.

You can take a look at how I implemented it for Keo. It needs a little updating as it's using Shadow DOM v0's createShadowRoot rather than attachShadow, but everything else should still be valid.

[vhmth]

Thank you for both solutions guys! Will let you know what I go with.

[vhmth]

@Wildhoney trying to adopt what's in Keo to some of our components. Tried to set it up in the following way:

const MyComponent = class extends Component {
  ...
};
export default compose(shadow(), ({ props }) => {
  return <MyComponent { ...props } />;
});

Now when I try to render that component, getContainer throws an error saying it can't read length of undefined (this.props.component.children is undefined apparently). I feel like I'm doing something dumb. :P

[vhmth]

Hmm seems like when I do change the component out to this:

export default compose(shadow(), ({ props }) => {
  return <p>Hello, world!</p>;
});

It does render correctly, but that now throws errors like this:

Invariant Violation: _registerComponent(...): Target container is not a DOM element.

[vhmth]

Hmm another update, in the example above I simply copy/pasta'd the shadow component. When I npm i keo and then import { shadow } from 'keo'; and use that, I'm getting the following error:

Error in event handler for (unknown): Invariant Violation: traverseParentPath(...): Cannot traverse from and to the same ID, ``.

Which is coming from componentDidMount when calling ReactDOM.findDOMNode(this).

[Wildhoney]

@vhmth you were almost there with the length error, as I believe that relates to the cssDocuments props not being passed. I encountered the same issue.

I've gone ahead and created a react-15.0 branch (on npm: 1.0.0-beta) to update the codebase for React 15.x. It no longer uses the mixin approach as that's somewhat deprecated. It instead uses Keo with a few optimisations and tweaks:

import ShadowDOM from 'react-shadow';

<ShadowDOM cssDocuments="css/my-component.css">
    <h1>Testing...</h1>
</ShadowDOM>

Where cssDocuments can be either string or array.

[Wildhoney]

Merged.

[vhmth]

Sweet! :D I completely forgot to come back to this - this is working like a charm now! Thank you so much Adam!