Shadow DOM styling

Hi

In the documentation under Styling shadow DOM components it states that it’s not recommended. What is the alternative when I have a custom component from the add-on directory?

I’m struggeling to style a component from the add-on directory. I have followed the steps in the documentation, even tho it’s not recommended :slight_smile:

Also I have this working on vaadin-grid where I have the css-file vaadin-grid.css in the components folder under my theme.

Now I’m trying to style lit-swagger-ui component the same way, but for some reason this is not working.

Any pointers would be appreciated!

The challenge with shadow DOM styling is that you need to make sure the CSS is injected inside the shadow root. Vaadin’s built-in components have a mechanism that looks for CSS to inject based on the naming convention that you’re using with vaadin-grid.css. Some add-ons made specifically for Vaadin also use the same mechanism whereas most other web components don’t. You have to refer to the documentation for the component to understand how the author intended it to be styled (if at all).

The general recommendation in our documentation to avoid shadow DOM styling is related to styling Vaadin’s built-in components. In previous generations, those components had to be styled through their shadow DOMs whereas never versions expose anything needed for most styling needs as CSS variables, parts, or light DOM children that can all be accessed from regular CSS.

2 Likes

hi @kjell-ivar

@Leif is right.

your component is not part of vaadin so there is a workaround

let swUi = (( your component selector ))

const injectCss = await import('./style.css', {
  assert: { type: 'css' }
});
swUi.shadowRoot.adoptedStyleSheets = [injectCss.default];


1 Like