Search code examples
cssweb-componentshadow-domvaadin-flow

Vaadin14 login-form css selector for shadow-root

I have a vaadin-login-form that has the default css styles applied to it. The DOM looks like this enter image description here

My question is how can I use a css selector for styling the label part of the vaadin-button-container ? I'm using a css file that's being used on my LoginView like so:

@CssImport(value = "./styles/login.css", themeFor = "vaadin-login-form")

I was able to style the vaadin-login-submit part with

[part="vaadin-login-submit"] {
    background-color: #0061ff;
}

in my css file but since the label part is inside the shadow dom I do not know how to select it for applying the proper css.

Solution

  • That is not the correct ::part syntax you are using.

    [part=...] is just a regular CSS attribute selector, that can indeed NOT pierce shadowDOM

    ::part(label) should do the job

    Proof nested shadowRoots can be styled with ::part:

    <style>
  ::part(shadowdiv) {
    color: red;
    font-weight: bold;
  }
</style>

<custom-element></custom-element>

<script>
  window.CEdepth = 0;
  customElements.define("custom-element", class extends HTMLElement {
    constructor() {
      super().attachShadow({mode: 'open'})
      if (window.CEdepth++ < 5) {
        this.shadowRoot.innerHTML = `
<div part='shadowdiv'>Hello Web Component #${window.CEdepth}
<custom-element></custom-element><div/>`;
      }
    }
  })
</script>