svelte - 如何使用@smui/dialog 构建一个纤细的 customElement?
问题描述
我想构建一个可以与 React 框架一起使用的 svelte 组件,在阅读了 svelte 文档之后,我决定将我的 Svelte 组件构建为 svelte customElement,一切都很顺利,直到我使用了@smui/dialog,我的代码:
<svelte:options tag="charity-legal-agreement-element" />
<script lang="ts">
import Dialog, {Title, Content, Actions} from '@smui/dialog';
...
<Dialog
bind:this={dialog}
aria-labelledby="dialog-title"
aria-describedby="dialog-content"
on:MDCDialog:closed={deleteItem}
>
...
</Dialog>
汇总配置:
svelte({
preprocess: sveltePreprocess({ sourceMap: !production }),
compilerOptions: {
// enable run-time checks when not in production
dev: !production,
customElement: true
},
// customElement: true
}),
postcss({
extract: true,
minimize: true,
use: [
['sass', {
includePaths: [
'./src/theme',
'./node_modules',
'../../node_modules',
]
}]
]
}),
...
来自调试控制台的错误:
index.mjs:1512 Uncaught TypeError: Illegal constructor
at new SvelteElement (index.mjs:1512)
at new Dialog (Dialog.svelte:56)
at create_fragment (index.svelte:53)
at init (index.mjs:1489)
at new Src (index.svelte:72)
at main.ts:13
at main.ts:18
SvelteElement @ index.mjs:1512
Dialog @ Dialog.svelte:56
create_fragment @ index.svelte:53
init @ index.mjs:1489
Src @ index.svelte:72
(anonymous) @ main.ts:13
(anonymous) @ main.ts:18
如果我删除 @smui/dialog ,一切正常,但我需要对话框作为基础组件,任何想法都值得赞赏~
解决方案
使用 Svelte 构建自定义元素时,应用程序中的每个组件都需要使用<svelte:options tag="custom-element-name-here" />
.
您可以尝试使用 Material UI 的Web 组件实现,尽管它还不是 1.0:
// main.js
import App from './App.svelte';
import '@material/mwc-dialog';
const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app;
<!-- App.svelte -->
<svelte:options tag="custom-element"/>
<h1>Hello world</h1>
<mwc-dialog heading="Test dialog" open="true">
<div>
Text goes here
</div>
</mwc-dialog>
另一种选择是不编译为自定义元素并使用svelte-adapter来使用 React 应用程序中的组件。
推荐阅读
- android - 制作 Android 应用时在 Visual Studio 中引用错误
- php - 验证 UPS api 凭据的解决方案
- java - 使用 OAuth2.0 客户端凭据向 Azure Log Analytics Api 进行身份验证
- amazon-web-services - AWS 中的 Kubernetes 服务访问
- c# - 由 C# EF 核心调用时暂停的选择查询,MSSQL 管理工作室执行查询就好了。为什么?
- python - 如何使用复杂列表中的数字作为标题/如何仅打印与某个值匹配的列表的一部分
- socket.io - 我们可以使用 Angular 6 客户端套接字连接到 Erlang 套接字服务器吗?
- javascript - 如何制作不调整自身大小的div
- wordpress - 是否可以在不影响子主题的情况下父主题?
- php - 正则表达式:如果字符串不以字符开头