Styling component

[majordo]

Is it possible to style component with external css file?
...Or only with inline styling?

[RathodSanjayL]

@majordo same I faced

I need an external style for the component

[VitalyBrusentsev]

If you use the Shadow DOM (default) mode, all external styles are ignored, that's the point of Shadow DOM, to isolate your component from the host styling.
The last release broke the non-Shadow DOM option (see issue #10) , and there is no fix in sight. So you can downgrade to

    "react-to-webcomponent": "^1.4.0"

and use external styling.

[majordo]

@VitalyBrusentsev thanks

[justinbmeyer]

We have fixed this in the new release

[chriszrc]

But what about css modules? Can't these be added inside the shadowdom root?

[subramanian-iouring]

@majordo @VitalyBrusentsev
How to use external style for the component?

[VitalyBrusentsev]

@subramanian-iouring External, as in "defined in the app that includes this web component"? Then just set { shadow: false } in your registration. All external styles will affect the component's markup. (Just make sure you use the fixed version).
If you meant "located in an external .css file", then you can render a <link> tag inside your component.

[subramanian-iouring]

@subramanian-iouring External, as in "defined in the app that includes this web component"? Then just set { shadow: false } in your registration. All external styles will affect the component's markup. (Just make sure you use the fixed version). If you meant "located in an external .css file", then you can render a <link> tag inside your component.

@VitalyBrusentsev Thanks for your quick reply.
I want shadow root for my component (custom-button), so i use {shadow: "open"}.
When i use this "custom-button" component in other application, the styles are not applied.

https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM#applying_styles_inside_the_shadow_dom

So, how to applying styles inside the shadow DOM in r2wc?

If i make shadow as false like you said, styles are overlapping in "custom-button" component, if same classnames are used in application and custom-button component.