Vaadin组件样式困惑：如何通过Shadow DOM访问元素内部节点

Hey there! Let's break down how to use the :host selector inside the Shadow DOM for your Vaadin components, since you already got the basic external styling working.

First, let's clarify the difference between what you've done and what the guide is showing:

• Your existing code vaadin-text-field { border: 1px solid gray; } targets the component's host element directly from outside the Shadow DOM, which works because Vaadin components allow some external styles to penetrate to the host.
• The :host selector is meant to be used inside the component's Shadow DOM to target the same host element, but with the benefit of being scoped to the component's internal style context (so it won't accidentally affect other elements).

Here's how to make it work properly for Vaadin components:

1. Use Vaadin's Theming System (Recommended) #

Vaadin's themable mixin is designed specifically for injecting styles into a component's Shadow DOM without needing to customize the component class directly. Update your shared-styles.html like this:

<dom-module id="custom-text-field-theme" theme-for="vaadin-text-field">
  <template>
    <style>
      /* Targets the vaadin-text-field host element from inside its Shadow DOM */
      :host {
        border: 1px solid gray;
      }
      
      /* Bonus: You can also target internal parts of the component */
      :host [part="input-field"] {
        background-color: #f5f5f5;
      }
    </style>
  </template>
</dom-module>

When you import this stylesheet, Vaadin will automatically inject the <style> block into every <vaadin-text-field>'s Shadow DOM. That's exactly what the guide is referencing with the #shadow-root (open) example!

2. Customize a Vaadin Component Subclass (If You Need Full Control) #

If you want to build a completely custom text field component, you can extend VaadinTextField and attach your own Shadow DOM with the :host style:

class CustomTextField extends VaadinTextField {
  constructor() {
    super();
    // Attach an open Shadow DOM (Vaadin uses open by default)
    this.attachShadow({ mode: 'open' });
    // Add your internal styles and preserve the component's content
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          border: 1px solid gray;
        }
      </style>
      <slot></slot> <!-- This keeps the original component's content working -->
    `;
  }
}
// Register your custom component
customElements.define('custom-text-field', CustomTextField);

Then you can use <custom-text-field> in your HTML, and the :host style will apply directly from its Shadow DOM.

Quick Note on Style Scoping #

The key thing to remember is that :host only works when the style is inside the component's Shadow DOM. Your original external style works because Vaadin components don't block all external styles from reaching the host element, but using the theme system is the official, maintainable way to apply scoped styles to Vaadin components' internal Shadow DOM.

内容的提问来源于stack exchange，提问作者Nick Friskel