在 Preact 和 typescript 中使用 Web 组件

我在用着自定义元素 https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements又称为网络组件Preact https://preactjs.com/。问题是 Typescript 抱怨元素没有被定义在JSX.IntrinsicElements- 在这种情况下check-box元素：

<div className={styles.option}>
    <check-box checked={this.prefersDarkTheme} ref={this.svgOptions.darkTheme}/>
    <p>Dark theme</p>
</div>

错误信息（省略路径）：

ERROR in MyComponent.tsx
[tsl] ERROR in MyComponent.tsx(50,29)
      TS2339: Property 'check-box' does not exist on type 'JSX.IntrinsicElements'.

我遇到了以下可能的解决方案，不幸的是不起作用：

1. https://stackoverflow.com/a/57449556/7664765 https://stackoverflow.com/a/57449556/7664765 - 这是一个与问题无关的答案，但它涵盖了我的问题

我尝试将以下内容添加到我的typings.d.ts file:

import * as Preact from 'preact';

declare global {
    namespace JSX {
        interface IntrinsicElements {
            'check-box': any; // The 'any' just for testing purposes
        }
    }
}

我的 IDE 将导入部分灰显并IntrinsicElements这意味着它没有被使用（？！）并且它无论如何也不起作用。我仍然收到相同的错误消息。

2. https://stackoverflow.com/a/55424778/7664765 https://stackoverflow.com/a/55424778/7664765 - 同样对于react，我尝试将其“转换”为preact，并且得到了与1相同的结果。

我什至找到了一个file https://github.com/GoogleChromeLabs/squoosh/blob/master/src/custom-els/RangeInput/missing-types.d.ts由 google 维护squoosh https://github.com/GoogleChromeLabs/squoosh他们在项目中执行了以下操作来“填充”支持：

与组件 a 位于同一文件夹中missing-types.d.ts文件包含以下内容，基本上与我的设置相同，但带有index.ts文件而不是check-bock.ts他们正在使用旧的 TS 版本v3.5.3:

declare namespace JSX {
  interface IntrinsicElements {
    'range-input': HTMLAttributes;
  }
}

我假设他们的构建没有失败，那么它是如何工作的以及如何正确定义自定义元素以在 preact/react 组件中使用它们？

我目前正在使用[email protected] /cdn-cgi/l/email-protection and [email protected] /cdn-cgi/l/email-protection.

以下是要使用的正确属性，否则传递时会出错key例如。

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'xx-element1': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; // Normal web component
      'xx-element2': React.DetailedHTMLProps<React.HTMLAttributes<HTMLInputElement>, HTMLInputElement>; // Web component extended from input
    }
  }
}