Unable to style a div using vaadin flow in chrome because of shadow-root

Flow
1

I have a div element that has the following structure:

How would i go about styling the div (class=“browse-components__grid”), lets say give it a red background. I made simple css file and imported it using the @stylesheet annotation.
It works fine in firefox, but doesn’t work at all in chrome.
How do i go about getting this to work in chrome?

css:

.browse-components__grid {
	background-color: red;
}

#myid {
	background-color: red;
}

17301123.png

2

As the <div> is inside a shadow root, the styles also need to be inside the same shadow root. The easiest way would be to add the styles inside a <style> block inside <nav-simplifier>

3

Hi Artur,

The <nav-simplifier> comes from an addon i am using. This is a screenshot of firefox, where is works properly.

How do i go about changing my css file to make sure chrome uses the stylesheet?
17301440.png

4

If the <nav-simplifier> component author hasn’t provided any ways to style the elements inside its shadow DOM, like CSS custom properties, you can’t really do anything about it.

Until the web platform offers a native way to style elements inside shadow DOM (and even then the component author needs to allow it) with ::part() and ::theme() ([read more about it]
(https://drafts.csswg.org/css-shadow-parts/)), there are only proprietary alternatives available, such as the [ThemableMixin]
(https://github.com/vaadin/vaadin-themable-mixin) that all Vaadin components use.

5

The reason why it works in Firefox, is that Firefox hasn’t shipped native shadow DOM support yet, so global styles still apply to all elements. But that’ll change soon, so your styling will stop working in Firefox as well.

6

I appreciate the answer Jouni. I was really looking forward to doing this project with vaadin flow. I have to build up my knowledge first concerning web components and all these new terminology. I any case I could also download the source and include my styles within the source. For the moment i will fallback to vaadin 8.
Thank you.

7

I switched back to using vaadin 8 and i am able to use my css classes that i had defined. I was analyzing the layout using chrome and saw the following:

I am using the [app-layout]
(https://vaadin.com/directory/component/app-layout-add-on) addon.
Why does my style sheet work in vaadin 8 and not in vaadin flow, even though they both seem to have the same structure. There is also a shadow-root.

17307213.png