Feature: keep existing DOM attributes

I have a use case where I’d like to keep the existing attributes on the elements, when rendering a Component into the DOM.

Here’s an example:

Existing DOM node:

<div id="outer" data-foo="foo">
  <div id="inner" data-bar="bar"></div>
</div>

Component:

const TestComponent = () => <div class="outer">
  <div class="inner">
    Test component
  </div>
</div>;

Expected output:

<div id="outer" data-foo="foo" class="outer">
  <div id="inner" data-bar="bar" class="inner">
    Test component
  </div>
</div>

This did work in Preact 10.0.0, but not anymore in 10.0.1, as mentioned in this issue, so it look like this was actually a bug in 10.0.0?

Codepen with Preact 10.0.0: https://codepen.io/dioslaska/pen/mdebjga Codepen with latest Preact: https://codepen.io/dioslaska/pen/jObNpdP

If yes, could you point me in the right direction what exact changes were made to avoid this? I could maybe use a custom preact version, if this won’t be possible in the future. Also, I can’t stick with 10.0.0 either, since there are other bug present as well.

A little details on the use case to explain why would be this useful: I’m working on a UI library supporting multiple frameworks. We need to support plain Javascript / jQuery as well, and the approach is to re-use the React components, and render them into the DOM using Preact.

A real world example, which enhances an existing input

<label id="my-label">
  <input id="my-input">
</label>

The Preact component will be rendered in the place of the label element. This works fine, but starting from Preact 10.0.1 the ids and other attributes are removed from the pre-existing elements. This is not ok, since the users of the library should be able to access the elements, e.g. using getElementById, to add event listeners, etc.

Please let me know if there’s any solution for this, or plans on changing this, or, in worst case, what could be modified in the preact source to make this work, and what are the potentially unwanted side effects.

[andrewiggins]

@dioslaska Another workaround to consider is to first call hydrate then render. hydrate will claim the existing DOM elements and then render will ensure that any differences between your VNodes and the DOM nodes are patched. https://codepen.io/andrewiggins/pen/yLajMrw

[developit]

Here’s a workaround for hydrate that lets you specify the replaceNode to hydrate:

import { hydrate } from 'preact';

const toReplace = document.getElementById('inner');
hydrate(<App />, { childNodes: [toReplace] });