Vaadin Flow自定义组件Shadow DOM应用Lumo主题最佳实践

请问是否存在推荐方案或最佳实践，可将「全局」默认主题或自定义主题的CSS规则应用到基于Lit模板创建的自定义组件的Shadow Root中？

目前已知一种临时解决方案：在connectedCallback生命周期中，导入applyTheme()函数手动为组件挂载主题，该方案的详细说明与问题背景可查阅对应GitHub issue下的评论。我还找到了一个提及相关解决方案的GitHub工单，但始终无法理解如何借助其中内容解决我的问题。

上述临时方案在配合IntelliJ中的Vaadin Designer插件使用时存在问题：插件无法识别applyTheme()函数，会抛出import { applyTheme } from frontend/generated/theme导入无法解析的错误，同时我也希望尽可能避免使用该临时方案。

如果存在除上述临时方案外的其他解决方式，我还想确认该方案是否兼容自定义主题、以及修改取值后的Lumo CSS属性？

复现示例 #

你可以按照如下方式创建一个基于Lit模板的自定义组件：

import '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout';
import '@vaadin/vaadin-ordered-layout/vaadin-vertical-layout';
import '@vaadin/vaadin-select';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import {applyTheme} from "Frontend/generated/theme";

@customElement('stub-view-card')
export class StubViewCard extends LitElement {
  // 注释以下代码，启用Shadow Root
  /*createRenderRoot() {
    // 不使用Shadow Root
    return this;
  }*/
  
  connectedCallback() {
    super.connectedCallback();
    // 因已知issue需手动挂载主题，不使用Shadow Root时不需要该步骤
    applyTheme(this.renderRoot);
  }

  render() {
    return html`<li class="bg-contrast-5 flex flex-col items-start p-m rounded-l">
      <div
        class="bg-contrast flex items-center justify-center mb-m overflow-hidden rounded-m w-full"
        style="height: 160px;"
      >
        <img id="image" class="w-full" />
      </div>
      <span class="text-xl font-semibold" id="header"></span>
      <span class="text-s text-secondary" id="subtitle"></span>
      <p class="my-m" id="text"></p>
      <span theme="badge" id="badge"></span>
      <slot></slot>
    </li> `;
  }
}

效果对比：

• 预期效果：主题样式正常生效，组件排版、配色符合设计规范
• 未添加connectedCallback与applyTheme()时的实际效果：主题样式未注入Shadow Root，组件样式错乱

当前环境信息 #

• 框架版本：Vaadin 23
• 项目来源：通过Vaadin官方项目生成工具创建
• 示例基础：基于官方提供的「image list」模板创建

非常感谢大家提供的任何帮助与相关文档指引 :)

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