Stencil Web Component中MDUI按钮渲染异常问题排查

我正尝试将MDUI组件（如按钮）集成到Stencil Web Component项目中，已按照MDUI文档引入相关CSS与组件，但MDUI按钮无法正常渲染，页面加载后仅显示为普通HTML按钮样式。

已完成的操作 #

1. Stencil组件（my-component.tsx） #

import { Component, Host, Prop, h } from '@stencil/core';
// Always import the CSS file
import 'mdui/mdui.css';
import 'mdui/components/button';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {

  @Prop()
  variant: 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text' = 'filled';

  @Prop()
  disabled = false;

  componentDidLoad() {
    (window as any).mdui?.init();
  }

  render() {
    return (
      <Host>
        <mdui-button variant={this.variant} disabled={this.disabled}>
          <slot></slot>
        </mdui-button>

        <button
          class={`mdui-btn mdui-btn-${this.variant}`}
          disabled={this.disabled}
        >
        TEst
        </button>

        <div>Helloosssso, World!</div>
      </Host>
    );
  }
}

2. CSS文件（my-component.css） #

:host {
  display: inline-block;
}

3. HTML文件（index.html） #

<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
    <title>Stencil Component Starter</title>

    <!-- MDUI CSS and JS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdui/1.0.1/css/mdui.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mdui/1.0.1/js/mdui.min.js"></script>

    <script type="module" src="/build/webcomponentsnext.esm.js"></script>
    <script nomodule src="/build/webcomponentsnext.js"></script>
  </head>
  <body>
    <my-component variant="filled" disabled="false"></my-component>
  </body>
</html>

已尝试的解决方法 #

• 禁用Shadow DOM以确保全局MDUI CSS生效
• 在componentDidLoad生命周期钩子中手动调用mdui.init()初始化MDUI
• 确认HTML文件中MDUI CSS与JS已正确加载
• 检查Stencil组件中MDUI类名（mdui-btn、mdui-btn-filled等）已正确应用

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