Unable to use ReactShadow with Component

[mhuggins]

I'm trying to create a higher order component for this, e.g.:

import React from "react";
import ShadowDOM from "react-shadow";

const withShadow = (...include) => (Component) => {
  return (props) => {
    return (
      <ShadowDOM include={include}>
        <Component {...props} />
      </ShadowDOM>
    );
  };
};

export default withShadow;

Usage:

const AppWrapper = _.flowRight(
  withStore(reducers),
  withShadow("path/to/app.css")
)(App);

ReactDOM.render(<AppWrapper />, ...);

Unfortunately I get an error:

ReactShadow: Passed child must be a concrete HTML element rather than another React component.

I don't see this documented, but I see that it's explicit in the source for this module. Is there a reason I can't use a component? Is it something that's possible to fix? I don't mind contributing, but I'm curious about the reason this is a limitation today.

[mhuggins]

FWIW, I was able to resolve this by throwing a <div> betweenand`, but not completely sure why it's needed. Might be good to add clarity in the README! Feel free to close this though.

[Wildhoney]

We have the check for passing a HTML node rather than a wrapped component, as ReactShadow needs to be able to determine the type of the node to append the shadow boundary to – otherwise it would have to recursively traverse the tree until it finds the first HTML node.

<div /> // this.props.children.type === 'div'

<WrappedComponent>
    <div /> // this.props.children.props.children.type === 'div'
</WrappedComponent>

We could do that, but it may have unforeseen consequences.

[mhuggins]

Is it because the shadow DOM function is called on the first HTML node it comes across? If so, how come the ShadowDOM component itself can't just create its own DOM element to us?

[Wildhoney]

Absolutely – we could do that, although it's making an assumption about the type of node to create, rather than taking it directly from your first child. I suppose we could accept an additional prop, such as wrapperNode.

Thoughts?

[Wildhoney]

I've taken a look at this again, and there are two issues, one of which we've spoken about:

• For <child.type> we don't have access to the type when the props.children is another component, and so we have to traverse through the children to find the first concrete element.
• With findDOMNode when the props.children is a concrete element it yields the node which we can attach a shadow boundary to. However when it's another component it yields null and thus we cannot attach a shadow boundary to that – we need a way to find the concrete node.

I can achieve the former, but the latter I'm not sure about at the moment.

Does anybody have any suggestions?

[javadoug]

@Wildhoney regarding the finding the concrete child issue: First, I suggest making the error message clear to add an HTML DOM as first child of ShadowDOM so error gives fix, no need to search/waste time. Second, optionally add a shadowRoot prop that takes a String, or Node or whatever else you can accept as value.

[nestarz]

How can I include css from my Component without being ignored ? Is it possible ?

[Wildhoney]

Should work just fine with the updated version.