search

preactjs / preact-custom-element

Wrap your component up as a custom element
MIT License
360 stars 52 forks source link

package does not work #62

Closed wansiedler closed 2 years ago

wansiedler commented 3 years ago

Hello, this is my index.js:

import register from "preact-custom-element";
import './style';
import App from './components/app';
register(App, "uiwiwidget");

template.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title><% preact.title %></title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png">
        <% preact.headEnd %>
    </head>
    <body>
        <% preact.bodyEnd %>
        <uiwiwidget></uiwiwidget>
    </body>
</html>

After yarn run dev or run build nothing happens. Page is empty. What should I do?

marvinhagemeister commented 3 years ago

Custom element names require a dash in them. Names without a dash like uiwiwidget are therefore not valid. The browser prints this error otherwise:

Screenshot 2021-07-07 at 22 48 40

To resolve this issue change the custom element name from <uiwiwidget> to something like <x-uiwiwidget> (best to use your custom prefix instead of x).

  import register from "preact-custom-element";
  import './style';
  import App from './components/app';
- register(App, "uiwiwidget");
+ register(App, "x-uiwiwidget");

...and in the HTML

      <!-- ...snip -->
      <% preact.bodyEnd %>
-     <uiwiwidget></uiwiwidget>
+     <x-uiwiwidget></x-uiwiwidget>
    </body>
  </html>

Note that the HTML template is not watched in preact-cli. You might not to either restart the cli all the time or you can render your custom element from Preact in your JSX for a more interactive development setup.