无构建SolidJS中如何正确使用自定义组件？

你的问题出在SolidJS的html模板字符串处理逻辑上：直接写<Foo></Foo>会被当作普通HTML标签解析，而非调用你定义的自定义组件。下面是两种可行的解决方法：

方法一：直接调用组件函数 #

在模板字符串中通过${}语法调用组件函数，这是无构建场景下最直接的方式：

<!DOCTYPE html>
<html>
  <body>
    <script type="module">
      import { onCleanup, createSignal } from "https://esm.sh/solid-js@1.8.1";
      import { render } from "https://esm.sh/solid-js@1.8.1/web";
      import html from "https://esm.sh/solid-js@1.8.1/html";
      
      const Foo = () => html`<em>FOO</em>`;

      const App = () => {
        const [count, setCount] = createSignal(0);
        const timer = setInterval(() => setCount(count() + 1), 1000);
        onCleanup(() => clearInterval(timer));
        // 直接调用Foo组件函数
        return html`<div><div>${count}</div>${Foo()}</div>`;
      };
      
      render(App, document.body);
    </script>
  </body>
</html>

方法二：注册为自定义元素（标签式用法） #

如果你希望像原生HTML标签一样使用组件，可以用SolidJS的defineCustomElement将组件注册为自定义元素：

<!DOCTYPE html>
<html>
  <body>
    <script type="module">
      import { onCleanup, createSignal } from "https://esm.sh/solid-js@1.8.1";
      import { render } from "https://esm.sh/solid-js@1.8.1/web";
      import html from "https://esm.sh/solid-js@1.8.1/html";
      import { defineCustomElement } from "https://esm.sh/solid-js@1.8.1/web";
      
      const Foo = () => html`<em>FOO</em>`;
      // 注册自定义元素，标签名必须包含连字符（HTML规范要求）
      defineCustomElement("foo-component", Foo);

      const App = () => {
        const [count, setCount] = createSignal(0);
        const timer = setInterval(() => setCount(count() + 1), 1000);
        onCleanup(() => clearInterval(timer));
        // 使用注册后的自定义元素标签
        return html`<div><div>${count}</div><foo-component></foo-component></div>`;
      };
      
      render(App, document.body);
    </script>
  </body>
</html>

关键说明 #

• 无构建场景下没有编译器自动转换组件标签为函数调用，因此必须显式调用组件函数，或注册为自定义元素。
• 自定义元素的标签名必须包含连字符，避免与原生HTML标签冲突，这是HTML规范的强制要求。

内容的提问来源于stack exchange，提问作者spinkus