对于非 React 应用，Skip Go 的 Widget 提供了 Web Component 版本可用。

​
安装

你可以通过以下两种方式导入该 Web Component：

​
1. NPM

import('@skip-go/widget-web-component');
注意：请确保为 Node 分配了足够的内存：CopyNODE_OPTIONS=--max-old-space-size=32384 你可以将其添加到 package.json 中的 npm scripts、.env file 中，或在直接运行 Node 时使用。

​
2. Script 标签或 CDN（推荐）

<body>
  <script
    async
    src="https://unpkg.com/@skip-go/widget-web-component/build/index.js"
    type="module"
  ></script>
</body>

​
用法

Props 与 WidgetProps 完全一致，但你必须通过 javascript/typescript 将它们传递给该元素。 
<div style="width:100%; max-width:500px; padding:0 10px;">
  <skip-widget></skip-widget>
</div>
<script>
  const skipWidget = document.querySelector("skip-widget");
  if (skipWidget) {
    skipWidget.theme = {
      brandColor: "#FF4FFF",
      borderRadius: 30,
    };
    skipWidget.defaultRoute = {
      srcChainId: "osmosis-1",
      srcAssetDenom: "ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4",
    }
  }
</script>

​
性能注意事项

建议对该组件进行懒加载，因为它已预先打包了所有依赖，这可能会影响加载时间，尤其是在开发环境中。
For non-React applications, the Skip Go Widget is available as a web component.

​
Installation

You can import the web component in two ways:

​
1. NPM

import('@skip-go/widget-web-component');
Note: Ensure Node has sufficient memory allocated: CopyNODE_OPTIONS=--max-old-space-size=32384 This can be added to npm scripts in package.json, a .env file, or used when running Node directly.
<body>
  <script
    async
    src="https://unpkg.com/@skip-go/widget-web-component/build/index.js"
    type="module"
  ></script>
</body>

​
Usage

Props are the exact same as WidgetProps but you are required to pass them to the element via javascript/typescript. 
<div style="width:100%; max-width:500px; padding:0 10px;">
  <skip-widget></skip-widget>
</div>
<script>
  const skipWidget = document.querySelector("skip-widget");
  if (skipWidget) {
    skipWidget.theme = {
      brandColor: "#FF4FFF",
      borderRadius: 30,
    };
    skipWidget.defaultRoute = {
      srcChainId: "osmosis-1",
      srcAssetDenom: "ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4",
    }
  }
</script>

​
Performance Considerations

It’s recommended to lazy load this component as it comes pre-bundled with all dependencies, which may impact load times, especially in development environments.