Help why include is not working and how to use props.theme

[wildhoney]

Help why include is not working and how to use props.theme

[micchyboy]

Thanks man. Its working fine now. Btw is there a way to only render once the css has been loaded?

[Wildhoney]

@micchyboy it looks fine to me – there's no reason why it wouldn't work, considering the CSS is being successfully loaded. Check your network tab, and then inspect the shadow boundary to ensure it contains the expected style tag with your test.css content.

The props.theme is not part of ReactShadow but part of the example. It's simply pointing out that the include prop could be either an array or a string.

Valid props are:

static propTypes = {
    children: PropTypes.node.isRequired,
    include: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
    nodeName: PropTypes.string,
    boundaryMode: PropTypes.oneOf(['open', 'closed']),
    delegatesFocus: PropTypes.bool
};

[Wildhoney]

👍 I wish – async React components is a deeper topic than ReactShadow, but we do have the class name approach, so you could hide your component until it's resolved.

[herodrigues]

@Wildhoney could you explain how to do that?

I'm using your library in a Chrome extension and it's essential that CSS documents load before the HTML content.

[Wildhoney]

@herodrigues it's probably better to refer to the example.

In the example the component renders as soon as it can, however it appears only once the CSS has been loaded using the following CSS styles 👍

[herodrigues]

@Wildhoney I understood how fetching mechanism works in your library. I solved my issue by putting the desired CSS in my manifest.json file. Thus, the style is injected before the DOM is loaded.