如何通过CSS文件修改vaadin-icon的stroke-width属性？

问题原因 #

• Shadow DOM 隔离限制：Vaadin组件（含vaadin-icon）采用Shadow DOM封装内部结构，外部CSS默认无法访问其内部的svg、path等元素，导致你原有的CSS选择器无法命中目标节点。
• 选择器精度不足：原选择器span vaadin-icon svg g path未精准定位到单个目标图标，即使能生效也可能误改其他图标，不符合你“仅修改某一处单个图标”的需求。

解决方案 #

方案1：使用Vaadin内置CSS变量（推荐） #

Vaadin 23的vaadin-icon支持通过--lumo-icon-stroke-width变量直接控制描边宽度，无需穿透Shadow DOM，步骤如下：

1. 目标图标已添加唯一类名close-big，可直接使用
2. 在CSS中针对该类设置变量：

.close-big {
  --lumo-icon-stroke-width: 0.1;
}

该方式仅作用于带有close-big类的图标，完全满足单个图标的修改需求，是组件官方推荐的兼容写法。

方案2：使用::part伪元素穿透Shadow DOM #

若需更自定义的样式，可通过::part访问vaadin-icon内部暴露的部件。vaadin-icon的内部SVG暴露了svg部件，可通过以下选择器修改路径样式：

.close-big::part(svg) g path {
  stroke-width: 0.1;
}

方案3：在Lit组件的静态样式中定义 #

如果是在自定义Lit组件内使用该图标，可直接在组件的静态样式块中编写样式：

import { LitElement, html, css } from 'lit';

class YourCustomComponent extends LitElement {
  static styles = css`
    .close-big {
      --lumo-icon-stroke-width: 0.1;
    }
    /* 或使用::part方式 */
    /* .close-big::part(svg) g path {
      stroke-width: 0.1;
    } */
  `;

  // 组件其他逻辑代码
}

Lit会自动处理Shadow DOM的样式隔离，确保样式正确作用到目标图标。

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