如何将Material Web组件导入到svelte项目

Question

我是 svelte 新手，在将 material web 组件导入 svelte 项目时遇到一些问题。

首先，当项目首次使用导入的组件（如选项卡、按钮...）运行时，它似乎工作正常

<script lang="ts">
    import '@material/web/all';

    $: tabIndex = 0;
  

    function handleChange(event: any) {
        tabIndex = event.target.activeTabIndex;
    }
</script>

<div>
    <md-tabs on:change={handleChange}>
        <md-primary-tab active={tabIndex == 0}>A</md-primary-tab>
        <md-primary-tab active={tabIndex == 1}>B</md-primary-tab>
        <md-primary-tab active={tabIndex == 2}>C</md-primary-tab>
    </md-tabs>
</div>

但是这些组件无法在 on:{eventname} 关键字处接收 DOM 事件。

其他 svelte 组件（如 svelte Material ui）工作正常。

对苗条有什么误解吗？或者普通的 js 组件（material web）就不能使用 svelte？如果是的话，有什么解决办法吗？

Answer 1

我在这里

自行找到了解决方案

在

/routes/layout.svelte

<script lang="ts">
    import { browser } from '$app/environment';

    const MaterialWebTabComponent = browser ? import('@material/web/all') : new Promise(() => {});

    $: tabIndex = 0;

    async function handleChange(event: any) {
        tabIndex = event.target.activeTabIndex;
    }
</script>
{#await MaterialWebTabComponent}
    <p>Loading...</p>
{:then component}
    <div>
        <md-tabs on:change={handleChange}>
            <md-primary-tab active={tabIndex === 0}>A</md-primary-tab>
            <md-primary-tab active={tabIndex === 1}>B</md-primary-tab>
            <md-primary-tab active={tabIndex === 2}>C</md-primary-tab>
        </md-tabs>
    </div>
{:catch error}
    <p>Something went wrong: {error.message}</p>
{/await}

CSR（客户端渲染）的原因。