Web Component custom attributes missing when using Preact

Greetings, I’ve found a possible issue when using Preact with Web Components (Custom Elements) where custom HTML attributes are not being assigned to the element when rendered by Preact. Originally I had created this as a React demo to make sure the Components work with React so the code is almost identical except the Preact version loads Preact instead of React of course.

Alternatively perhaps the error is with the Web Component and React is just handling it but so far in my research everything with the Web Component seems good and it works well with regular HTML.

Reproduction

https://codepen.io/conrad-sollitt/pen/JjREjQg

Preact Version for the Demo

<script src="https://unpkg.com/preact@10.5.7/dist/preact.min.js"></script>

<!-- Page also includes this so it works with Preact DevTools -->
<script src="https://unpkg.com/preact@10.5.7/debug/dist/debug.umd.js"></script>
<script src="https://unpkg.com/preact@10.5.7/devtools/dist/devtools.umd.js"></script>

Original Demo (Preact) https://www.dataformsjs.com/examples/web-components-with-preact.htm

Based on React Version that Works Both files share the same JSX https://www.dataformsjs.com/examples/web-components-with-react.htm

Steps to reproduce

• Use either the CodePen or original link I provided and click the Data Page from the top nav.
• It should show the error below (Chrome Version 87) and in DevTools the attribute [url] is indeed missing.

Expected Behavior

• Here is the React Version (link above), when you click on the same Data Page it works because the the url custom HTML attribute is included.

Additional Notes

HTML Source for the Demo https://github.com/dataformsjs/dataformsjs/blob/master/examples/web-components-with-preact.htm

JSX Source for the Demo https://github.com/dataformsjs/dataformsjs/blob/master/examples/web-components-with-react.jsx

Source for the <json-data> Web Component https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/json-data.js The minified version is simply minified using Terser and not compiled down to ES5 or earlier versions of JS

Source for working <markdown-content> Web Component https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/markdown-content.js Intresting the Markdown page is working and it too uses a url attribute Both files have a similar layout and:

class {name} extends HTMLElement ...
  static get observedAttributes() {
    return ['url', '..'];
  }

I’ll still do some more work to see if I can track down the issue myself.

[weaintplastic]

Preact’s behavior of not rendering attributes to custom elements creates issues in our isomorphic environment.

We pre-render web components by hydrating them on the server-side. In a nutshell, web components are rendered with light DOM and scoped CSS instead of Shadow DOM. This way we can guarantee that our web components are displayed on the client-side before the application is available.

The server-side hydration of web components operates on a DOM that was created using preact. Because of the missing attributes on custom elements, the hydration is missing meaningful instructions that otherwise would be available when added as attributes.

It seems that the React team stumbled upon this caveat while working on web component support. It would be great if this issue could be reopened to continue the discussion to set attributes rather than assigning property values for web components when rendered with Preact.

[havran]

@ConradSollitt Hi, thanks for answer.

I try recreate same bug, with simple web component and basic NextJS app, which I create, but without success. Simple component work.

Seems like problem is related with component which we use, because when I try use same component, then I get same problem.

When I found some more, I add this info here. Thanks again.