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

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.

CodePudding user response：

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

• See spec: https://drafts.csswg.org/css-shadow-parts/#part

• and https://meowni.ca/posts/part-theme-explainer/

[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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>