Use application theme for exported web components

See the original issue :#8543. The current behavior is by design but I don’t even know how to style the embedded component since it’s inside shadow root of the generated wrapper. I’ve made already a ticket in the docs about styling of embedded components.

May be we should provide API for WebComponentExporter which allows to include styles which works for its content and allow to style the embedded component in its shadow root.

The only way to do styling which I see at the moment is: make the embedded component as a web component ( e.g. a Polymer element) and “inline styling” there so that it’s local and doesn’t leak globally. But it’s silly because if I want to use only standard HTML components (like div) I have to make my own wrapper just to style it. It’s reasonable to add styling to already existing wrapper which we generate.

[rolfsmeds]

Well, assuming you have a Flow component, like public class FooBar extends MenuBar { ... } the way you’d apply styling to it is by giving it a css classname setClassName("foobar"); then you create a stylesheet foobar.css and write the css for the component there .foobar { color:red; } That’s good old fasioned global css, as it’s not scoped inside a shadow root.

And the problem with the exported web component is that now there’s suddenly a shadow root around the component, so there’s no way for the styles in foobar.css to be applied to the component.

So what the new theming system does is to automatically inject foobar.css inside of that shadow root, so that it’s actually applied to the component, just as they would be in a Flow app, as long as foobar.css is in a theme folder (e.g. frontend/theme/foo) that’s applied to the project using @Theme("foo");

So, if you have a second component, FooField, that uses the foofield.css stylesheet, both stylesheets will be injected into the shadow root of both components. But of course they use different selectors for their styles, so that shouldn’t be a problem, just as if they were used in a regular Flow app without exporting as web components.

[rolfsmeds]

Actually yes, although with a slightly different solution. We’re working on a new theming mechanism (https://github.com/vaadin/platform/issues/1571) that will solve this, amongst other things, which will come to V19 if all goes well.

Specifically this part in the AC:

The theme’s global css can be applied to the shadow dom of custom web components such as application views built with TS+Lit, and java components exported using the WebComponentExporter feature.

In short:

• Any css you need to apply to a Flow-based component is essentially global css, as there are no shadow roots by default in Flow.
• The new theming mechanism will automatically inject all global css into the Web Component wrapper generated by WebComponentExporter.