如何在solid.js项目中使用Web组件？

发布于 2025-01-28 20:25:07 字数 271 浏览 2 评论 0 原文

当我尝试在我的solid.js项目中使用Web组件（而不是建造一个）时，它无法识别标签不是固有的元素。如何设置Solid.js以识别Web组件？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

驱逐舰岛风号 2025-02-04 20:25:08

这就是您可以扩展全局类型的方式，以摆脱TS错误：

import type { ComponentProps } from "solid-js"

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "aero-modal": ComponentProps<"div"> & { foo: number }
    }
  }
}

我不知道如何使自定义元素自己工作...但是我认为它们已经做到了。它们毕竟是自定义元素，而坚实的元素也不判断。如果JSX中的标签处于小写状态，则应将其视为HTML元素。

注意： componentProps＆lt;“ div”＆gt; ＆amp; {foo：number} 我放在那里，是道具。如果组件没有任何内容，则可以将 {} 放在那里。

This is how you can extend the global types, to get rid of TS error:

import type { ComponentProps } from "solid-js"

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "aero-modal": ComponentProps<"div"> & { foo: number }
    }
  }
}

I don't know how to get the custom elements themselves to work though... But I would assume they already do. They are custom elements after all, and solid doesn't judge. If the tag in JSX is in lowercase, it should treat it as an html element.

Note: The ComponentProps<"div"> & { foo: number } I've put there, are the props. You could put an {} there if the component doesn't have any.

回复收藏 0 原文

寒江雪… 2025-02-04 20:25:08

如果您正在扩展 htmlelement ，则可以更通用的解决方案

declare module 'solid-js' {
  namespace JSX {
    type ElementProps<T> = {
      // Add both the element's prefixed properties and the attributes
      [K in keyof T]: Props<T[K]> & HTMLAttributes<T[K]>;
    }
    // Prefixes all properties with `prop:` to match Solid's property setting syntax
    type Props<T> = {
      [K in keyof T as `prop:${string & K}`]?: T[K];
    }
    interface IntrinsicElements extends ElementProps<HTMLElementTagNameMap> {
    }
  }
}

来自固体GitHub上的问题。

If you're extending HTMLElement, a more general solution may be

declare module 'solid-js' {
  namespace JSX {
    type ElementProps<T> = {
      // Add both the element's prefixed properties and the attributes
      [K in keyof T]: Props<T[K]> & HTMLAttributes<T[K]>;
    }
    // Prefixes all properties with `prop:` to match Solid's property setting syntax
    type Props<T> = {
      [K in keyof T as `prop:${string & K}`]?: T[K];
    }
    interface IntrinsicElements extends ElementProps<HTMLElementTagNameMap> {
    }
  }
}

From an issue on the Solid github.

回复收藏 0 原文

~没有更多了~